Question

I’m doing z-index management by class .. so the active object gets the class topmost ..

function topmost() {
    $(".topmost").removeClass("topmost");
    $("#thing").addClass("topmost");
}

This code doesn’t seem to be working, and I can’t fathom why ..

== EDIT ==

The problem is that $(".topmost").removeClass("topmost"); is finding zero results when there are several on the page. I use this class selector often and have never had this issue. The class is being added by jQuery in the first place, but it should see it anyway. I look in my inspector and log the selection and it comes up with zero when I can see the at least 3 divs with the class. It is a function nested in an object, is that a problem? Can it scope out of the object and search the whole DOM?

Answer 1

If I understand correctly, you are inserting elements after the dom loads? If so you need to delegate the event to a parent element that exists in the dom.

$('body').on('click','div', function() {
    $('.topmost').removeClass();
    $(this).addClass('topmost');
});

body can be replaced with the closest parent element the exists on dom ready

One last thing, always wrap your event binding inside a $(document).ready function or place the script at the bottom of your html code to ensure elements exist at the time of binding.

Here’s an example fiddle of it working

http://jsfiddle.net/MPT3z/

Here’s how to apply the click event to all elements

$('body').on('click','*', function() {
    $('.topmost').removeClass();
    $(this).addClass('topmost');
});

http://jsfiddle.net/eLDpn/