使用 jquery 附加到 div 的图像不可点击答案

【问题标题】：Image appended to div using jquery is not clickable使用 jquery 附加到 div 的图像不可点击
【发布时间】：2015-03-30 12:16:24
【问题描述】：

我在尝试单击附加到 div 的图像时遇到问题。

我有一个“plus_btn”，当它被点击时，它会在 div 中添加一个或多个“closebtn”。该部分工作正常，但单击这些关闭按钮的下一步不起作用。我还有一个名为“att-id”的属性，我试图通过单击 closebtn 来获取该属性，但单击不会生效。

这是我的 jquery 代码：

$(document).ready(function(){  
var i = 0;
$('#plus_btn').click(function(){
    $("#content").append('<img id="closebtn" class="imgbtn" att-id="'+i+'" width="20" height="20" src="manage/images/closebtn.png">');              
    i++;
});   
$(".imgbtn").click(function(){
    alert('gggg');          
}); 
});

这是我的html代码：

    <img id="plus_btn" src="images/plus_btn.png" width="15" height="15" />
    <div id="content" name="content">

任何帮助将不胜感激。

【问题讨论】：

标签： jquery html image click append

【解决方案1】：

jQuery默认不监听动态插入的内容，需要像这样使用ON方法：

$('#parent_element').on('click', '.class_of_new_dynamic_element_here', function(){ 
   // code here 
}

你的工作Fiddle here

发生这种情况是因为 jQuery 知道与其一起加载的 DOM，因此之后附加的任何元素都需要指定给 jQuery。

希望对你有所帮助

【讨论】：

感谢您的建议。我尝试改用 .on 并删除了 id 标签，但仍然没有运气！我在这里有 jsfiddle 上的代码：jsfiddle.net/b12svb4s/3 如果有机会请你看看。
基本上，当使用ON时，您必须选择父元素，然后指定您希望eventListener在的元素。这样 jQuery 就知道在哪里精确查找，它节省了宝贵的 DOM 遍历。我也更新了我的答案。希望这有帮助:)

【解决方案2】：

使用.on() 而不是点击：

$(".imgbtn").on('click',function(){
    alert('gggg');          
});

另外id 属性是唯一的，因此您不能在每次单击按钮时都添加#closebtn。我建议也为此使用类。

【讨论】：

感谢您的建议。我尝试改用 .on 并删除了 id 标签，但仍然没有运气！我这里也有代码：jsfiddle.net/b12svb4s/3如果有机会请你看看。