在动态创建的元素上附加javascript / jquery事件 [英] Attach javascript/jquery event on dynamically created elements
问题描述
我看过很多与此类似的不同的问题，但是所有的问题通常都针对特定的选择器。请让我知道，如果有一个重复的地方，我错过了ID。
采取这个senerio：
你想为wordpress，drupal或基本上使用第三方功能的任何网站构建一个jQuery插件。由于您不知道每个特定的事件和选择器，您将需要将如何添加jQuery / javascript功能到动态创建的元素。此外，您不知道如何创建元素（使用ajax / php / etc回调）。
示例：
我最近尝试添加select2或选择到我的整个网站。不幸的是，由于我将无法确定select元素（来自其他插件/模块）的添加时间，所以我无法确保select 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（）;
}）;
}）;
然而，由于我不知道所有的动态选择器提前选择（因为很多由第三方插件添加），select2将不会在新的选择上工作。所以上面的内容只适用于每个病例的senerio。
我需要做的是找到一种方式遍历dom树，并识别何时创建新的选择。
我尝试使用.on定位几个事件，但根本不奏效。
我阅读javascript document.getElementsByTagName 识别dom中的更改，并反映在集合中。我也研究了 querySelectorAll ，但不能确定它是如何工作的。
我也试着弄乱code> MutationObserver 并检查选择标签的 .addednodes.length 是否已更改，但我没有真正得到任何地方。
更新
做了一些测试后，我意识到问题可能在于select2插件本身。 Select2加载动态选择，但没有得到定位。 Chrome最终会抛出typeerros：无法读取属性find为null，无法读取属性hasclass为null。
解决方案：
我将回答您的基本问题将javscript / jquery事件附加到动态创建的元素。
为了在动态创建的元素上添加事件，您必须利用或事件委托，当它传播的元素上的事件触发器时。
所以如果你在根目录下附加事件处理程序ement（它可以是身体或任何在您附加此事件时存在的父元素）
$（body） .on（click，elementSelector，function（）{
}）;
现在，这将从动态创建的元素捕获事件。
I've seen a lot of different questions similar to this, but all of them generally targeted a specific selector. Please let me know if there is a duplicate somewhere and I've missed id.
Take this senerio:
You want to build a jquery plugin for a wordpress, drupal, or basically any site that uses thrid party functionality. Since you don't know ahead of time every specific event and selector you will need to targe how would you add jquery/javascript functionality to elements that are created dynamically. Plus you don't know how the element is created (callback using ajax/php/etc).
Example:
I recently tried adding select2 or selectize to my entire site. Unfortunately, since I can't determine ahead of time when select elements (from other plugins/modules) will be added, I can't ensure that the select jquery will work on newly created selects.
Select2
This is the normal way but doesn't work on dynamically created or cloned selects:
<script type='text/javascript'>
jQuery(document).ready(function($) {
$("select").select2();
</script>
If I knew all the events that added these selects I could simply do the following:
$( ".some_button_that_creates_new_selects" ).on( "click", function() {
jQuery("select").select2();
});
});
However, since I don't know all the selectors of dynamic selects ahead of time (since many are added by 3rd party plugins), select2 will not work on new selects. So the above would only work on a per case senerio.
I need to do is find a way to traverse through the dom tree and recognize when new selects are created.
I tried targeting several events with .on but it didn't work well at all.
I read that the javascript document.getElementsByTagName recognizes changes in the dom and are reflected in the collection. I also looked into querySelectorAll, but not sure exactly how it works.
I also tried messing with the MutationObserver and checking if the .addednodes.length of select tags changed, but I didn't really get anywhere.
UPDATE
After doing some testing I realized that the problem might lie within the select2 plugin itself. Select2 loads dynamic selects but doesnt get the positioning. Chrome eventually throws typeerros : cannot read property 'find' of null, cannot read property 'hasclass' of null.
Solution:
I am going to answer your base question "Attach javscript/jquery event on dynamically created elements".
For adding event on dynamically created elements you have to take advantage or Event Delegation, when a event trigger on an element it propagates.
So if you attach event handler on a root element( it can be body or any parent element which is present when you are attaching this event)
$("body").on("click","elementSelector", function(){
});
Now this will capture event from dynamically created elements as well.
这篇关于在动态创建的元素上附加javascript / jquery事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
