Jquery .on() 方法不适用于动态创建的元素答案

【问题标题】：Jquery .on() method not working on dynamically created elementsJquery .on() 方法不适用于动态创建的元素
【发布时间】：2015-12-18 21:42:48
【问题描述】：

在查看了其他问题并尝试了许多可能的解决方案后，我仍然无法正确绑定 click 事件，非常感谢任何帮助。我正在开发一个与 api 交互的网页，没有服务器，只是进行 ajax 调用。

这是我的 HTML：

    <div class = "img image-1 onTop" style="width:300px;left:0px">
      <div class = "pallette-container">
        <div class = "color-sample">
         <div class = "color-overlay">
           <p>#55423</p>
         </div>
        </div>
      </div>
    </div>

当我从 ajax 请求返回数据时，我会动态创建这些“img”div 和所有子 div。

我需要在 'div.color-overlay' 元素上绑定一个点击事件函数。

我尝试了许多不同的方法来绑定它，并且已经达到了我认为用选择器抓取元素的最具体的方法。

这是我写的函数：

    $('div.img.onTop.image-1>div.palette-container').on('click', 'div.color-sample>div.color-overlay',function(event){
       var searchValue = $(this).parent().attr('data-color');
       $('#colorvalue').val(searchValue);
    });

请帮助我了解问题所在。我没有逻辑可以尝试。非常感谢！我正在使用 Jquery 2.1.3。

【问题讨论】：

代码对我来说看起来不错。您确定点击事件没有正确绑定吗？将console.log 放入您的函数中，看看它是否在点击时登录。我假设您认为这不起作用，因为事件不受约束。我看到了别的东西。我看到div.color-sample 元素上没有data-color 属性。 :) 这就是为什么 seems 不起作用/
我在你的 html 中看不到 data-color 属性。
你能否添加完整的 HTML 和 JS 代码来说明如何在 DOM 中添加动态内容
“当我从 ajax 请求取回数据时动态创建这些“img” div 和所有子 div” 尝试在 complete 回调处附加 click 事件$.ajax() ?

标签： jquery css ajax dom

【解决方案1】：

您的开始是正确的，但是为了完成这项工作，您需要将您的事件处理程序绑定到一些更高级别的元素，例如body：

$('body').on('click', 'div.color-sample>div.color-overlay',function(event){
   var searchValue = $(this).parent().attr('data-color');
   $('#colorvalue').val(searchValue);
});

这里的想法不是在它发生的元素上处理事件，而是让它冒泡，在这种情况下直到body元素，然后在这里处理它。这些就是所谓的委托事件。

您可以在jQuery documentation 中阅读有关委托事件的更多信息，查看直接和委托事件部分

【讨论】：

是的！所以，将它附加到 $('body') 工作！对于任何人来说都是一个类似的地方——我也尝试将它附加到 $('document') 上，但是没有运气。我真的很好奇 - 为什么 $('body') 作为父对象而不是其他对象......这是什么魔法:) 谢谢
@BhojendraNepal 任何父元素都可以。在代码示例中，我们只看到重复元素，因此不清楚父元素是什么，body 应该在那里。
@dotnetom 我会用文档来完成它（就像我评论过的那样）为什么它不能工作并且身体会工作你能扩展它吗
@user3562480 附加到 $('document') 不起作用，因为您的代码中没有 HTML 元素 document。我相信如果是$(document)，它会起作用。
文档也应该像$(document)而不是$('document')那样工作

【解决方案2】：

当我得到时动态创建这些“img” div 和所有子 div 从 ajax 请求返回的数据。

尝试在$.ajax() 完成后附加click 事件？，附加到DOM 的元素？

   $.ajax().then(function(html) {
    // do stuff, 
    // create these "img" divs and all the child divs
    // append `'div.color-sample>div.color-overlay'` elements to `DOM`
    $('div.img.onTop.image-1>div.palette-container')
    .on('click', 'div.color-sample>div.color-overlay',function(event){
       var searchValue = $(this).parent().attr('data-color');
       $('#colorvalue').val(searchValue);
    });
   }, function err(jqxhr) {
        console.log(jqxhr.status)
   })

【讨论】：

【解决方案3】：

.on() 仅适用于现有元素。

将事件绑定到动态元素的一种方法是每次创建元素时，然后仅为该元素绑定事件。

另一种方法是将事件绑定到父元素

【讨论】：