Remove the click event from a single Div element

Question

I have added a mousedown handler to all the divs inside a parent div, like this:

$productContainer.children(".button").on('mousedown', function(){
    var index = $(this).index();
    console.log("Clicked button at " + index);
    // this doesnt work
    $(this).removeAttr('mousedown');
});

Now I want to remove the mousedown handler after the button is clicked, for that particular div. How do I do that? Removing the attr mousedown doesn't seem to work.

Answer 1

Use the off method:

$productContainer.children(".button").on('mousedown', function(){
    var index = $(this).index();
    console.log("Clicked button at " + index);
    $(this).off('mousedown');
});

More info: http://api.jquery.com/off/

You could also use the one method instead. It will automatically remove your event handler at the first time it is triggered:

$productContainer.children(".button").one('mousedown', function(){
    var index = $(this).index();
    console.log("Clicked button at " + index);
});

More info: http://api.jquery.com/one/

Answer 2

use .off Description: Remove an event handler.

$productContainer.children(".button").off('mousedown');
$productContainer.children(".button").on('mousedown', function(){
    var index = $(this).index();
    console.log("Clicked button at " + index);
    // this doesnt work
    $(this).removeAttr('mousedown');
});

Answer 3

instead of :

$(this).removeAttr('mousedown');

use :

$(this).unbind('mousedown');

or

$(this).off('mousedown');