How to remove click event on "this" object in jQuery

Question

My DOM structure is as follows,

<a id='c_1' class='like'>Like</a>
<a id='c_2' class='like'>Like</a>
<a id='c_3' class='like'>Like</a>
......

Binding click event as follows,

$(document).on("click",".like",function(){
      var selector = $(this);
      saveLikes(selector);       
});

saveLikes(selector) have Ajax call,on success of Ajax call I want to remove/unbind click event on currently clicked element for that I've written following code in success callback.

$(document).off("click",selector);

It's not working and I'm able to remove click event by $(document).off("click",".like"); but I don't want this because further clicks on other elements will not fire the event.

Is their any solution to remove event on current element only that too without changing class name ?

score 2 · Answer 1 · answered Jul 02 '13 at 06:41

2

In this case you

$(document).on("click",".like",function(){
    var selector = $(this);
    if(selector.data('liked')){
        return;
    }

    saveLikes(selector);     
    selector.data('liked', true)
});

Or

$(document).on("click",".like:not(.liked)",function(){
    var selector = $(this).addClass('liked');
    saveLikes(selector);     
});

answered Jul 02 '13 at 06:41

Arun P Johny

384,651
66
527
531

+1... `selector.data('liked', true)` should be moved to the success callback .. I believe – Sushanth -- Jul 02 '13 at 06:42
@ArunPJohny: Is their any solution without changing class name ? – Mahesh.D Jul 02 '13 at 06:48
@Mahesh.D you have the first one, in the second one the class name is not changed, we are adding a new class – Arun P Johny Jul 02 '13 at 07:00

score 1 · Answer 2 · answered Jul 02 '13 at 06:36

1

This one...

$('#foo').unbind('click', function() {
    alert('The quick brown fox jumps over the lazy dog.');
});

REFERENCE: .unbind()

answered Jul 02 '13 at 06:36

Olrac

1,527
2
10
22

score 1 · Answer 3 · edited Mar 11 '14 at 11:31

1

Maybe this would help

$( "#foo" ).one( "click", function(){
    alert( "This will be displayed only once.");
});

The Click event is executed just once for that particular ID and unbinds it automatically.

REFERENCE: .one()

edited Mar 11 '14 at 11:31

cfi

10,915
8
57
103

answered Mar 11 '14 at 10:44

Shruthi Shetty

11
1

Manoj Yadav · Answer 4 · 2013-07-02T08:19:25.537

0

Updated code

$(".like").click(function() {
    var selector = $(this);
    saveLikes(selector);
    selector.off('click');       // <- Put this in Ajax success
});

edited Jul 02 '13 at 08:19

answered Jul 02 '13 at 06:32

Manoj Yadav

6,560
1
23
21

What I've asked and what you have given answer ? will not match at all,thanks. – Mahesh.D Jul 02 '13 at 06:35
@Baadshah: Sorry if you felt in that way. – Mahesh.D Jul 02 '13 at 06:42

score 0 · Answer 5 · answered Jul 02 '13 at 06:38

0

If you want to add click event once then you can use one() for this,

like,

$('.like').one("click",function(){
      var selector = $(this);
      saveLikes(selector);       
});

answered Jul 02 '13 at 06:38

Rohan Kumar

40,431
11
76
106

How to remove click event on "this" object in jQuery

5 Answers5