jQuery选择器-

Question

I'm going mad trying to figure out why my code won't work.

I am setting an li element with an active class, which works..

i then want to select that li element which has class 'active' - and give it a click function that slides another div into view, which is also identified by the class 'active'

here is my code:

$(".contentPanel").click(function() {
  $(this).siblings().animate({height: minHeight,},500).removeClass("active");
  $(this).animate({height: maxHeight,},500).addClass("active");
  $('li').removeClass("active");
  $(this).children('ul').children('li').addClass("active");
  $('.infoPanelSlider').removeClass("active");
  $(this).children('.infoPanelWindow').children('.infoPanelSlider').addClass("active");
});

The above works, the li elements inside the active 'contentPanelSlider' are given the class active.

The next bit is where i"m stuck:

I want to write this:

$('li.active').click(function().... do something

but the 'active part doesnt seem to work - it works if i just target the 'li', without the active class selector...

I'm wondering if this has something to do with the fact that the active class was added by JQuery on the fly, and not hard coded in the stylesheet - but this is a complete guess..

Please help if you can, I dont mind getting flamed...

Answer 1

You could attach the handler to all li and check whether they have class active :

$('li').click(function() {
    if($(this).is('.active')) {
        // do more
    }
});

Even better (if you have a lot of li s) is to delegate the event. This will only add one event handler (whereas the previous solution will add an event handler to every li element and thus consuming more memory). You just need to have a common ancestor:

ancestor.delegate('li.active', 'click', function() {
      // do more
});

---

$('li.active') will only work if the li s have this class at the moment when you assign the handler not when the handler is executed. Thus:

$(".contentPanel").click(function(){});
$("li.active").click(function(){});

won't work if there are no li elements with this class yet, but this

$(".contentPanel").click(function() {
    // add class to li
    $('li.active').click(function(){});
});

would work. But it would also add the event handler every time, so assigning once and testing is better.

Answer 2

Yes, your suspicions are correct. jQuery selectors resolve at the time of execution. If you are looking for li.active during the starting website, nothing matches. jQuery offers live() and delegate() which can get around this problem by checking every click event at a higher level.

// will match any click event on any li with the class active when it is clicked:
$('li.active').live('click', function() {
   alert('Active Clicked');
});

Answer 3

Yes. Its happening because the class was added on the fly. Use jquery's live function to bind the click event to the li

$('li.active').live('click',function(){ //Do something. });

Answer 4

If live doesn't work you can try bind:

$('li.active').bind('click',function(){
//do something 
});