为什么addEventListener单击不起作用？

Question

这是代码，我无法触发点击事件监听器

Javascript：

var cid = 1721;
var alt = "4x6_" + cid;
var thumb = "168c619a1d1743bd4f3aba9d69a8c3ce";
var mattes_selected_type = "182";
var i = 0;
function common_get_site_url()
{
  return "https://jsfiddle.net/img/logo.png";
}

//
var thumb_img = new Image();
thumb_img.id = 'cid_' + cid;
thumb_img.alt = alt;
thumb_img.src = ""; 
thumb_img.addEventListener('load', function() {
   alert("LOAD");
}, false);
thumb_img.addEventListener('click', function() {
  alert("CLICK");
}, false);
thumb_img.src = common_get_site_url();

$('#matte_designs_strip_wrapper').append('<span class="matte_design_image_name"><img id="cid_' + cid + '" src="' + thumb_img.src +'" /></span>'); 

HTML：

<div id="matte_designs_strip_wrapper"></div>    

https://jsfiddle.net/allisonc/yoq4Lotx/1/

Answer 1

尝试将最后一行更改为：

$('#matte_designs_strip_wrapper').append($('<span class="matte_design_image_name"/>').append(thumb_img));

否则，您会将addEventListener应用于永远不会出现的元素

Answer 2

您引用一个Image对象，而不是您期望的实际HTML元素。 一旦您动态地添加和添加了HTML，就想运行

$('#cid_' + cid).on('click', function(e) {
  // Your code here
});

然后，您的事件监听器将针对正确的HTML，而不仅仅是任何对象：）

Answer 3

 var cid = 1721; var alt = "4x6_" + cid; var thumb = "168c619a1d1743bd4f3aba9d69a8c3ce"; var mattes_selected_type = "182"; var i = 0; function common_get_site_url() { return "https://jsfiddle.net/img/logo.png"; } // var thumb_img = new Image(); thumb_img.id = 'cid_' + cid; thumb_img.alt = alt; thumb_img.src = ""; thumb_img.addEventListener('load', function() { alert("LOAD"); }, false); thumb_img.addEventListener('click', function() { alert("CLICK"); }, false); thumb_img.src = common_get_site_url(); var span = $('<span class="matte_design_image_name"></span>') span.append(thumb_img) $('#matte_designs_strip_wrapper').append(span); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div id="matte_designs_strip_wrapper"></div>