在动态创建的元素上附加 javascript/jquery 事件

我见过很多与此类似的不同问题，但所有这些问题通常都针对特定的选择器。如果某个地方有重复的内容，但我错过了，请告诉我。

以这个场景为例：

您想要为 wordpress、drupal 或基本上任何使用第三方功能的网站构建一个 jquery 插件。由于您无法提前知道每个特定事件和选择器，因此您需要确定如何向动态创建的元素添加 jquery/javascript 功能。另外，您不知道元素是如何创建的（使用ajax/php/等回调）。

Example:

我最近尝试将 select2 或 selectize 添加到我的整个网站。不幸的是，由于我无法提前确定何时添加选择元素（来自其他插件/模块），因此我无法确保选择 jquery 将在新创建的选择上工作。

Select2

这是正常的方式，但不适用于动态创建或克隆的选择：

<script type='text/javascript'>
    jQuery(document).ready(function($) {
        $("select").select2();
    });
</script>

如果我知道添加这些选择的所有事件，我可以简单地执行以下操作：

 $( ".some_button_that_creates_new_selects" ).on( "click", function() {
        jQuery("select").select2(); 
    });
 });

但是，由于我事先不知道动态选择的所有选择器（因为许多选择器是由第 3 方插件添加的），因此 select2 将不适用于新选择。因此，上述内容仅适用于每种情况。

我需要找到一种方法来遍历 dom 树并识别何时创建新的选择。

我尝试使用 .on 来定位多个事件，但效果并不好。

我读到了 javascriptdocument.getElementsByTagName识别 dom 中的更改并反映在集合中。我也调查过querySelectorAll，但不确定它到底是如何工作的。

我也尝试过搞乱MutationObserver并检查是否.addednodes.length的选择标签发生了变化，但我并没有真正取得任何进展。

UPDATE

经过一些测试后，我意识到问题可能出在 select2 插件本身。 Select2 加载动态选择但没有获得定位。 Chrome 最终抛出 typeerros ：无法读取 null 的属性“find”，无法读取 null 的属性“hasclass”。

解决方案：

我将回答您的基本问题“在动态创建的元素上附加 javascript/jquery 事件”。

要在动态创建的元素上添加事件，您必须利用事件委托，当元素上的事件触发时，它会传播。

因此，如果您将事件处理程序附加到根元素上（它可以是主体或附加此事件时出现的任何父元素）

$("body").on("click","elementSelector", function(){

});

现在，这也将从动态创建的元素中捕获事件。