Handler doesnt get an event

I have 开发者_运维百科this code : if you try to click on Button 2 or 3 you can see the right effect. Now, go back and try to click on Button 1 : nothing happens.

Why? Thanks

$('.navigatorUserButtonOff').click(function(e){
    e.preventDefault();
    $('.navigatorUserButtons').find('.navigatorUserButtonOn').removeClass().addClass('navigatorUserButtonOff');
    $(this).removeClass().addClass('navigatorUserButtonOn');
});

The reason why it's not working

Because this selector you use at the beginning to bind click handler

$('.navigatorUserButtonOff')

selects only the second and third button. So you're binding click handler only them couple. First button doesn't have this class hence no click handler is bound to it.

Two posible solutions

1. use delegate (you could use live as well but using delegate is better and works faster)

   $(".navigatorUserButtons").delegate(".navigatorUserButtonOff", "click", function(evt){
       evt.preventDefault();
       // remove and add classes as desired
   });
   

   This one will be a bit problematic because click handler will only be working on the off state buttons which means that clicking on the on state button will execute default browser behaviour that happens when you click a link. This is definitely not desired in your situation and you'll have to bind a click event to a on button as well to prevent default behaviour.

2. A much better approach is to use a separate class that defines a button and a different one for its on/off state:

   <a class="navigatorUserButton on">...</a>
   

   And you don't need off state at all neither delegated events:

   $(".navigatorUserButton").click(function(evt){
       evt.preventDefault();
       var $this = $(this);
       if (!$this.hasClass("on"))
       {
           $this.siblings(".on").removeClass("on");
           $this.addClass("on");
       }
   });
   

The reason this occurs is because the code which hooks up the events only runs once. At the time it runs button 2 and 3 meet the criteria and succesfully hookup the event. Later changes to the DOM qualify button 1 for the filter but it doesn't run again and hence button #1 doesn't get hooked up.

You can fix this by using the live function in jQuery.

$('.navigatorUserButtonOff').live('click', function(e){
  e.preventDefault();

  $('.navigatorUserButtons').find('.navigatorUserButtonOn').removeClass().addClass('navigatorUserButtonOff');
  $(this).removeClass().addClass('navigatorUserButtonOn');
});

Here is a link to a working version

• http://jsfiddle.net/qGMfJ/1/

Because the click event is not attached to first button. It is attached to only items that have class navigatorUserButtonOff. The first one has class of navigatorUserButtonOn. You could use the live instead

$('.navigatorUserButtonOff').live("click", function(e){
    e.preventDefault();
    $('.navigatorUserButtons').find('.navigatorUserButtonOn').removeClass().addClass('navigatorUserButtonOff');
    $(this).removeClass().addClass('navigatorUserButtonOn');
});

Demo.

from what I've tested, if I changed the <div class="navigatorUserButtons"> <a id="view_tracklist" class="navigatorUserButtonOn" href="#">Button 1</a> and instead of navigatorUserButtonOn, you put Off, then it becomes clickable, and highlights just as the others do

It's not working because the selector is filtering for elements that already have a class set to navigatorUserButtonOff, which your first button doesn't have when the document is loaded.

That's easy one. It because you did

$('.navigatorUserButtonOff').click(...)

Which only does on click for navigatorUserButtonOff. Change it to

$('.navigatorUserButtons a').click(...)

Because when you are attaching the event to $('.navigatorUserButtonOff') elements, the first button is not within them! So it doesn't get the event handler. Try this:

$('.navigatorUserButtons a').click(function(e){
    e.preventDefault();
    if($(this).hasClass('navigatorUserButtonOn'))
        return false;
    $('.navigatorUserButtons').find('.navigatorUserButtonOn').removeClass().addClass('navigatorUserButtonOff');
    $(this).removeClass().addClass('navigatorUserButtonOn');
});

When the code is run, it finds all the off buttons (2 and 3, because initially 1 is on) and adds that event listener to its click event. You have to do that for all the div's children, because that function assignment is only executed one time.

That's because you are adding an event to all navigatorUserButtonOff and right after you did that you change the navigatorUserButtonOn to navigatorUserButtonOff so you have to add the event to the first button right after you change it