在jQuery中是否有委派事件的方法?

Is there any way to delegate the event one in jQuery?

本文关键字：事件 方法 委派 jQuery 是否      更新时间：2023-09-26

我想委托事件一个点击。有人知道这是否可行吗?

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

我将这样实现它:

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

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

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

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

虽然上面的代码完美地模拟了它，但它仍然有些粗糙，因为它实际上并没有做与.one()相同的事情(取消绑定事件处理程序)。

由于这篇文章是几年前的，我只是想为更多的当代读者(2015年)提供一个完整的更新示例。逻辑与这里的其他答案没有什么不同，但jQuery的方法自2011年以来一直在发展。具体来说:

从jQuery 1.7开始，.delegate()已经被。on()方法所取代。
jQuery委托()

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

我相信有一种简洁的方法可以做到这一点，但是一种简单的方法是这样做的:

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

相关文章：