Question

我想delegate one click的事件{{3}}。有谁知道是否可以这样做？

Answer 1

我将假设您希望事件仅在PER匹配元素时触发，而不是在第一次单击时完全取消绑定。

我会这样实现它：

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

  // ... your code here ...


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

});

每个元素只会触发一次。从技术上讲，它每次都会触发，但在第一次点击时会被标记，因此代码不会再次执行。

模拟.one（）处理程序w / delegate的固有问题是使用.one（）在选择器中匹配的每个元素都绑定了自己的事件处理程序。因此，当它第一次被触发时，它会解除/删除该元素的处理程序。你不能用.delegate（）做到这一点，因为只有一个SINGLE处理程序被用于所有匹配的元素。

虽然上面的代码完美地模拟了它，但它仍然有点hackish，因为它实际上并没有像.one（）那样做（取消绑定事件处理程序）。

Answer 2

由于这篇文章已有几年历史，我只想为更多当代读者提供一个完整的更新示例（2015）。逻辑与此处的其他答案没有什么不同，但是自2011年以来jQuery的方法已经发展。具体来说：

从jQuery 1.7开始，.delegate（）已被.on（）方法取代 jQuery delegate()

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我确信有一种巧妙的方法可以做到这一点，但一个简单的方法就是这样：

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

编辑：感谢下面的评论，我决定使用数据，现在这并没有将DOM全部用于w3c标准。

有没有办法在jQuery中委托事件一个？

3 个答案: