Is there any way to delegate the event one in jQue

问题:

I would like to delegate the event one for the click. Does anyone know if it is possible to do it?

回答1:

I'm going to assume that you want the event to fire only once PER matched element rather than unbind entirely on the first click.

I'd implement it like so:

$('#container').delegate('.children', 'click', function() {
  if($(this).data('clicked')) {
      return;
  }

  // ... your code here ...


  $(this).data('clicked', true);

});

This will fire only once per element. Technically, it fires everytime but is flagged the first time it is clicked so the code will not execute again.

The inherent problem of simulating a .one() handler w/ delegate is that using .one() each element that was matched in the selector is bound its own event handler. So when it is fired for the first time it unbinds/removes the handler from that element. You can't do that with .delegate() because only a SINGLE handler is being used for ALL the matched elements.

While the code above simulates it perfectly, it is still somewhat hackish because it doesn't literally do the same thing that .one() does (unbinding an event handler).

回答2:

Since this post is a few years old, I just wanted to provide a complete updated example for more contemporary readers (2015). The logic is no different from the other answers here, but jQuery's methods have evolved since 2011. Specifically:

As of jQuery 1.7, .delegate() has been superseded by the .on() method.
jQuery delegate()

// define output element
var $output = $('div#output');

// attach delegated click handler
$(document).on('click', 'button', function() {
  
  // define clicked element
  var $this=$(this);
  
  // if this element has already been clicked, abort
  if ($this.data('clicked')) {
    return false;
  }
   
  // perform click actions
  $output.append("clicked " + $this.html() + "<br />");
 
  // mark this element as clicked
  $this.data('clicked',true);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>One</button>
<button>Two</button>
<button>Three</button>

<div id="output"></div>

回答3:

I'm sure there is a neat way of doing it, but a simple way to do it would be something like this:

<script>
  $(document).ready(function(){
    $("#container").delegate('.clickers', 'click', function(){
      if($(this).data("clicked")==null){
        $(this).data("clicked", "true");
        $("#container").append($(this).html());
      }
    });
  });
</script>
<div class="clickers" clicked="false"></div>
<div class="clickers" clicked="false"></div>

EDIT: Thanks to the comments below I decided to use data, now this doesn't screw the DOM all up for w3c standards.