在动态创建的元素上附加javascript / jquery事件
我已经看到了许多与此类似的不同问题，但所有这些问题通常都针对特定的选择器。 如果某处有重复，请告诉我，我已经错过了。
采取这种情况：
你想为wordpress，drupal或任何使用第三方function的网站构建一个jquery插件。 由于您事先并不知道每个特定事件和选择器，因此您需要定位如何将jquery / javascriptfunction添加到动态创建的元素中。 另外，你不知道元素是如何创建的（使用ajax / php / etc进行回调）。
例：
我最近尝试将select2或selectize添加到我的整个网站。 不幸的是，由于我无法提前确定将添加选择元素（来自其他插件/模块），我无法确保select jquery将适用于新创建的选择。
选择二
这是常规方法，但不适用于动态创建或克隆的选择：
jQuery(document).ready(function($) { $("select").select2(); }); 如果我知道添加这些选择的所有事件，我可以简单地执行以下操作：
$( ".some_button_that_creates_new_selects" ).on( "click", function() { jQuery("select").select2(); }); });
但是，由于我不知道所有动态选择的选择器（因为许多是由第三方插件添加的），所以select2将不适用于新的选择。 所以上面只适用于每个案例senerio。
我需要找到一种遍历dom树的方法，并识别何时创建新选择。
我尝试使用.on定位几个事件，但它根本不能正常工作。
我读到javascript document.getElementsByTagName识别dom中的更改并反映在集合中。 我也查看了querySelectorAll ，但不确定它是如何工作的。
我也尝试搞乱MutationObserver并检查select标签的.addednodes.length是否发生了变化，但我并没有真正得到任何结果。
UPDATE
在做了一些测试后，我意识到问题可能在于select2插件本身。 Select2加载动态选择，但没有获得定位。 Chrome最终会抛出typeerros：无法读取属性’find’的null，无法读取null的’hasclass’属性。
解：
我将回答你的基本问题“在动态创建的元素上附加javscript / jquery事件”。
要在动态创建的元素上添加事件，您必须利用事件委派，当事件触发它传播的元素时。
因此，如果您在根元素上附加事件处理程序（它可以是正文或附加此事件时存在的任何父元素）
$("body").on("click","elementSelector", function(){ });
现在，这将从动态创建的元素中捕获事件。
最简单的解决方案是在javascript中创建一个函数，每次在页面上动态添加任何控件时都会调用该函数，在该函数中，您可以放置检查，以便仅在新组件上注册事件。 例如
function registerEvents() { //Get all the select events from the page and register events only on those controls which are new .. $("select").each(function() { if (!$(this).hasClass("registeredEvent")) { $(this).addClass("registeredEvent"); $(this).select2(); } }); }
通过不同的方法可以实现相同的结果。
还要检查jquery中的.live事件..当新元素添加了相同的标记或类时，它会自动注册事件。