Using .one() with .live() jQuery

Question

I was using the .live function

$('a.remove_item').live('click',function(e)

but I needed to change this to one() to prevent multiple clicks, however when I inject one of these elements after the page has loaded the one() listener does not fire.

How can I get one() to behave like live()?

Thank you!

Answer 1

Try this:

$('a.remove_item').live('click',function(e) {
  if($(e.target).data('oneclicked')!='yes')
  {
    //Your code
  }
  $(e.target).data('oneclicked','yes');
});

This executes your code, but it also sets a flag 'oneclicked' as yes, so that it will not activate again. Basically just sets a setting to stop it from activating once it's been clicked once.

Answer 2

Try this

$('a.remove_item').live('click', function(e) {
    if(!$(this).hasClass('clicked'))
    {
      $(this).addClass('clicked');
      alert("dd"); // this is clicked once, do something here
    }
});​

Answer 3

Just use jQuery's .die() method in the handler:

Example: http://jsfiddle.net/Agzar/

$('a.remove_item').live('click',function(e) {
    alert('clicked');
   $('a.remove_item').die('click'); // This removes the .live() functionality
});​

---

EDIT:

Or if you only wanted to disable the event on a per-element basis, you could just change the class name since live() is selector-based.

Example: http://jsfiddle.net/Agzar/1/

$('a.remove_item').live('click',function(e) {
    alert('i was clicked');
    $(this).toggleClass('remove_item remove_item_clicked');
});​

This changed the class from remove_item to remove_item_clicked which could have the same styling. Now live() will not fire after the first click.