为什么addEventListener不能正常工作？

问题描述：

这是代码，我不能让click事件侦听火为什么addEventListener不能正常工作？

的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/

为什么没”当你在页面中包含'jQuery'时，是否使用'jQuery'来处理事件？ –

没有任何真正的原因，除了我在经历这个项目时正在学习它，所以没有被一贯使用。 – AllisonC

@Santi我在ready函数中确实有它，我只是没有在示例中包含它 – AllisonC

答

试图改变过去的line to：

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

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

谢谢，这个修正了它。（当它让我时会接受） – AllisonC

答

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

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

那么你的事件监听器将目标锁定在适当的HTML，不是任何对象:)

答

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>

为什么addEventListener不能正常工作？

相关推荐