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

Question

在查看了其他问题并尝试了许多可能的解决方案之后，我仍然无法正确绑定(bind)点击事件，非常感谢任何帮助。我正在处理一个与 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。

我需要将点击事件函数绑定(bind)到“div.color-overlay”元素。

我已经尝试了很多不同的方式来绑定(bind)它，并且找到了我认为最具体的用选择器抓取元素的方式。

这是我写的函数:

    $('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。

Answer 1

您的起点是正确的，但是为了完成这项工作，您需要将事件处理程序绑定(bind)到某个更高级别的元素，例如 body:

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

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

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

部分