CODEWITHSUNDEEP
jquery
Ben
Ben

Reputation: 104

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 toggle 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

Upvotes: 1

Views: 131

Answers (6)

Akarun
Akarun

Reputation: 3350

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){...

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 816334

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')) {
       //...
   }
});

Upvotes: 0

Quincy
Quincy

Reputation: 4433

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");
            }
        });
    });
});

Upvotes: 0

JamesHalsall
JamesHalsall

Reputation: 13475

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

Upvotes: 1

Terseus
Terseus

Reputation: 2212

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');
            }
        });
    });
});

Upvotes: 1

Blowsie
Blowsie

Reputation: 40535

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');
});

Upvotes: 0

Related Questions