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

Question

我已经看到很多与此类似的不同问题,但所有这些问题通常都针对特定的选择器.如果某处有重复,请告诉我,我错过了.

采取这种情况:

你想为wordpress,drupal或任何使用第三方功能的网站构建一个jquery插件.由于您事先并不知道每个特定事件和选择器,因此您需要定位如何将jquery/javascript功能添加到动态创建的元素中.另外,你不知道如何创建元素(使用ajax/php/etc回调).

例:

我最近尝试将select2或selectize添加到我的整个网站.不幸的是,由于我无法提前确定将添加选择元素(来自其他插件/模块),我无法确保选择jquery将适用于新创建的选择.

选择二

这是常规方法,但不适用于动态创建或克隆的选择:

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

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

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

但是,由于我不知道所有动态选择器的选择器(因为许多是由第三方插件添加的),所以select2将不适用于新的选择.所以上面只适用于每个案例的senerio.

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

我尝试使用.on定位几个事件,但它根本不能正常工作.

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

我也试过搞乱MutationObserver并检查.addednodes.length选择标签是否改变,但我没有真正得到任何地方.

UPDATE

在做了一些测试后,我意识到问题可能在于select2插件本身.Select2加载动态选择但没有获得定位.Chrome最终会抛出typeerros:无法读取属性'find'的null,无法读取属性'hasclass'的null.

Answer 1

解:

我将回答你的基本问题"在动态创建的元素上附加javscript/jquery事件".

要在动态创建的元素上添加事件,您必须利用事件委派,当事件触发它传播的元素时.

因此,如果您在根元素上附加事件处理程序(它可以是正文或附加此事件时存在的任何父元素)

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

});

现在,这将从动态创建的元素中捕获事件.