如何查找容器内的所有事件并委派它们

How to find all events inside a container and delegate them

本文关键字：事件 委派 何查找 查找      更新时间：2023-09-26

假设我有一个这样的标记

<div class="container">
    <div class="abc" onclick="alert(this.innerHTML)">ABC</div>
    <div class="abc1">ABC</div>
    <div class="abc2">abc2</div>
    <div class="xys3">xys3</div>
    <div class="asd23">asd223</div>
</div>

有些事件与像这样的container的children绑定

$( ".abc1" ).bind( "click", function(){
   alert( $( this ).html() );
} );
$( ".abc2" ).bind( "click", function(){
   alert( $( this ).html() );
} );
$( ".xys3" ).bind( "click", function(){
   alert( $( this ).html() );
} );
$( ".asd23" ).bind( "click", function(){
   alert( $( this ).html() );
} );

现在，我从容器中取出html并再次设置它：

var html = $( ".container" ).html();
// a set missing here to convert 'bind' events to 'on' events
$( ".container" ).html( html );

事件现在不起作用，因为它们一开始就没有委派。此外，容器可能具有更多元素（它们是动态的）。

是否可以在容器内找到所有事件并委派它们？

这是一个小提琴

从 jQuery 1.7 开始，.on() 方法是将事件处理程序附加到文档的首选方法。对于早期版本，.bind() 方法用于将事件处理程序直接附加到元素。

所以只需使用 on（） 事件委托，它就会解决问题：

$( "body" ).on( "click", ".abc2", function(){
    alert( $( this ).html() );
});

您可以将一个通用类添加到所有div，然后将点击事件附加到它：

.HTML：

<div class="container">
  <div class="my-class abc" onclick="alert(this.innerHTML)">ABC</div>
  <div class="my-class abc1">ABC</div>
  <div class="my-class abc2">abc2</div>
  <div class="my-class xys3">xys3</div>
  <div class="my-class asd23">asd223</div>
</div>

.JS：

$( "body" ).on( "click", ".my-class", function(){
     alert( $( this ).html() );
});

希望这有帮助。

$( "body" ).on( "click", ".my-class", function(){
  alert( $( this ).html() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="my-class abc" onclick="alert(this.innerHTML)">ABC</div>
  <div class="my-class abc1">ABC</div>
  <div class="my-class abc2">abc2</div>
  <div class="my-class xys3">xys3</div>
  <div class="my-class asd23">asd223</div>
</div>

委托方法如下所示：

$(document).on( "click", ".abc1", function(){
     alert( $( this ).html() );
});

您可以使用 DOM 中未更改的元素更改$(document)，该元素是您需要委派的子项的父级。使用文档将在任何情况下都有效，但性能可能会降低。

相关文章：