Question

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

我动态创建这些＆＃34; img＆＃34;当我从ajax请求获取数据时，div和所有子div。

我需要将点击事件功能绑定到＆＃39; div.color-overlay＆＃39;元件。

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

这是我写的函数：

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

您开始走上正轨，但为了完成这项工作，您需要将事件处理程序绑定到某个更高级别的元素，例如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中详细了解委派活动，查看直接和委派活动

部分

Answer 2

动态创建这些＆＃34; img＆＃34;我得到了div和所有的孩子div 来自ajax请求的数据。

在click完成后尝试附加$.ajax()个事件？，附加到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)
   })

Answer 3

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

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

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

Jquery .on（）方法不处理动态创建的元素

3 个答案: