爲什麼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/

來源

2017-05-26 AllisonC

爲什麼沒」當你在頁面中包含'jQuery'時，是否使用'jQuery'來處理事件？ –

沒有任何真正的原因，除了我在經歷這個項目時正在學習它，所以沒有被一貫使用。 – AllisonC

@Santi我在ready函數中確實有它，我只是沒有在示例中包含它 – AllisonC

試圖改變過去的line to：

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

否則，您將addEventListener用於永遠不會出現的元素

來源

2017-05-26 16:06:32 FieryCat

謝謝，這個修正了它。（當它讓我時會接受） – AllisonC

您引用了Image對象，而不是您期望的實際HTML元素。一旦你附加和動態添加的HTML要運行

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

那麼你的事件監聽器將目標鎖定在適當的HTML，不是任何對象:)

來源

2017-05-26 16:09:00

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>

來源

2017-05-26 16:09:11 Tareq

爲什麼addEventListener不能正常工作？

回答

相關問題