JQuery element selector issue

Really confused with this one. I am selecting an 'a' element by its class of 'add-bookmark'. On click the a element will tog开发者_运维百科gle the class of that element to 'bookmarked' so it supposedly can't be clicked again.

On the first time of clicking it, the toggle works successfully and updates the element with the new class of 'bookmarked' removing 'add-bookmark'. When I click on the element again, the jquery still works even though the class doesn't match that of the selector?

$('.add-bookmark').click(function(e){
    e.preventDefault();

    var uri_segment = $(this).attr('href');
    $(this).animate({opacity: 0}, 'slow', function() {
        $.ajax({
            type: "POST",
            url: uri_segment,
            success: function(data) {
                $('.add-bookmark').toggleClass('add-bookmark bookmarked');
                $('.bookmarked').animate({opacity: 100}, 'slow');
            }
        });
    });
});

Could this be to do with the DOM not updating on the toggleClass?

Any help would be great, thanks!

Ben

Still works because you've already added a callback to the onClick event, you can add a check if the DOM element still have the class:

$('.add-bookmark').click(function(e){
    e.preventDefault();
    if (!$(this).hasClass('add-bookmark'))
        return(false);

    var uri_segment = $(this).attr('href');
    $(this).animate({opacity: 0}, 'slow', function() {
        $.ajax({
            type: "POST",
            url: uri_segment,
            success: function(data) {
                $('.add-bookmark').toggleClass('add-bookmark bookmarked');
                $('.bookmarked').animate({opacity: 100}, 'slow');
            }
        });
    });
});

It doesn't, you use the original selector to attach the event to the <a> element. When you click the first time it animates and updates the class (removes add-bookmark class and adds the bookmarked class).

Working example:

http://jsfiddle.net/fYqWD/

You can remove the click event using an unbind() call to prevent the click event from firing again

It's because You use "click()", that a handler event is set one time for ever.

Use "live()" instead of click:

$('.add-bookmark').live('click', function(e){...

Try unbinding the event from $(this)

$('.add-bookmark').click(function(e){
    e.preventDefault();

    var uri_segment = $(this).attr('href');
    $(this).animate({opacity: 0}, 'slow', function() {
        $.ajax({
            type: "POST",
            url: uri_segment,
            success: function(data) {
                $('.add-bookmark').toggleClass('add-bookmark bookmarked');
                $('.bookmarked').animate({opacity: 100}, 'slow');
            }
        });
    }).unbind('click');
});

try to unbind!

$('.add-bookmark').click(function(e){
    e.preventDefault();

    var uri_segment = $(this).attr('href');
    $(this).animate({opacity: 0}, 'slow', function() {
        $.ajax({
            type: "POST",
            url: uri_segment,
            success: function(data) {
                $('.add-bookmark').toggleClass('add-bookmark bookmarked');
                $('.bookmarked').animate({opacity: 100}, 'slow');
                $(this).unbind("click");
            }
        });
    });
});

The click handler is attached to the element when you execute the code. The selector is only for selecting the elements at that time. Once the handler is attached, it does not matter how you change the element (apart from explicitly removing the event handler).

Either you want the click handler to fire only once. Then you can use one ^[docs]:

$('.add-bookmark').one('click', function(e){
    //...
});

Or you want the element respond to click but only when it has class .add-bookmark (i.e. you will add this class latter again somehow). Then you should check whether the element currently has this class, using hasClass ^[docs]:

$('.add-bookmark').click(function(e){
   if($(this).hasClass('add-bookmark')) {
       //...
   }
});