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

Question

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

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

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

我们将不胜感激。

Answer 1

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

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

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

Answer 2

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

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

你的工作Fiddle here

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

希望对您有所帮助

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

Image appended to div using jquery is not clickable

html

jquery

image

append

click