Jquery .on（）方法不能在动态创建的元素上工作

在查看其他问题并尝试许多可能的解决方案之后，我仍然无法获得点击事件的正确绑定，并且非常感谢任何帮助。我正在开发一个与api交互的网页，而不是服务器，只是进行ajax调用。Jquery .on（）方法不能在动态创建的元素上工作

这是我的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>

我动态地创建这些“IMG”的div和所有的孩子申报单时，我得到的数据，从一个Ajax请求回。

我需要绑定一个点击事件函数'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。

来源

2015-09-22 user3562480

代码对我来说看起来很好。你确定点击事件没有受到任何限制吗？在你的函数里放一个'console.log'，看看它是否被点击登录。我假设你认为这不起作用，因为事件没有约束。我看到别的东西。我发现'div.color-sample'元素没有'data-color'属性。 :)这就是为什么它似乎无法正常工作/ – AdityaParab

我看不到HTML中的数据颜色属性。 –

你可以添加你如何在DOM – Tushar

你开始步入正轨，但为了使这项工作，你需要你的事件处理程序绑定到一些更高级别的元素，例如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阅读更多关于委托的事件，看看部分直接和委托的事件

来源

2015-09-22 03:41:00 dotnetom

为什么身体？其母公司也是好的，不是吗？ –

YEAH！所以，附加到$（'身体'）工作！对于任何人都是类似的地方 - 我试图将它附加到$（'文档'），但是，没有运气。我真的好奇 - 为什么$（'body'）作为父对象而不是其他人......这是什么魔法:)谢谢 – user3562480

@BhojendraNepal任何父元素都可以。在代码示例中，我们只能看到重复元素，所以不清楚父元素是什么，并且'body'应该在那里。 – dotnetom

动态地创建这些“IMG”的div和所有的孩子申报单时，我得到数据传回从阿贾克斯请求。

试过后$.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) 
    })

来源

2015-09-22 03:55:31 guest271314

.on()只适用于存在的元素。

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

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

来源

2015-09-22 03:57:56

Jquery .on（）方法不能在动态创建的元素上工作

回答

相关问题