Question

我的情况是只有第一次点击图像才能工作，第二次点击其他功能时不会运行。

<script>
jQuery(document).ready(function($) {
   $('#temp_container img').click(function(){
     var img = $('#temp_container img').attr('src');
     $('#temp_container2').append('<img src="'+img+'">');
   });

   $('#temp_container2 img').click(function(){
     alert('works');
   });
});
</script>

<div id="temp_container">
   <img src="http://cdn-images.farfetch.com/10/62/22/35/10622235_3103339_170.jpg">
</div>
<div id="temp_container2"></div>

单击div temp_container中的图像时，图像将被复制并附加到temp_container2，当点击div temp_container2中的图像时，应执行警报。但由于某些原因，这在运行时不会执行。我已经被困在这个问题上几个小时了。

由于

Answer 1

在动态添加元素时，您需要使用on()进行事件委派。

Demo

$('#temp_container2').on('click', 'img', function(){
   alert('works');
});

在$('#temp_container2')中添加元素时，您可能需要使用$(this).attr('src')代替$('#temp_container img').attr('src')

 $('#temp_container img').click(function(){
  var img = $('#temp_container img').attr('src');
  $('#temp_container2').append('<img src="'+img+'">');
});

委派活动

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。通过选择一个保证在当时存在的元素委托事件处理程序附加，您可以使用委托事件避免经常附加和删除事件处理程序，jQuery doc

Answer 2

$('#temp_container img').click(function(){

应该是

$('#temp_container').click(function(){

或者你可以为图像本身创建一个新的div，这样可以更容易。

jQuery图像点击功能无效

2 个答案: