在動態創建的圖像中的onclick函數不起作用

嗨我剛剛創建了一個動態表，它的工作正常，但我需要點擊imageId。所以我做的是：在動態創建的圖像中的onclick函數不起作用

document.getElementById("imageId").addEventListener("click", function() {  
    alert("hello");  
});

但它不工作，我不需要任何jquery只使用JavaScript。

下面給出動態代碼創建表，它工作正常。

var body = document.body, 
    tbl = document.createElement('table'), 
    tableId = document.createAttribute('id'); 

tbl.style.width = '100%'; 

for (var i = 0; i < 3; i++) { 
    var tr = tbl.insertRow(); 
    tr.style.height= '40px'; 
    var timetd = tr.insertCell(); 
    var tdcompany = tr.insertCell(); 
    var chatsymbol = tr.insertCell(); 
    var amounttd = tr.insertCell(); 
    tdcompany.innerHTML = "abc"; 
    timetd.innerHTML = "ss"; 
    chatsymbol.innerHTML = '<img src=\'images/iproseIcon2.png\' width= "35%" margin-top="10px"; >'; 
    amounttd.innerHTML = total + '<img id="imageId" src=\'images/iconarrowright.png\' >'; 
}

來源

2016-11-04 manu padmanabhan

我的猜測是'addEventListener'在圖像添加到DOM之前調用。爲了確保我們需要知道你的代碼片段的執行順序。 – BetaRide

要嘗試的另一種模式是將您的事件偵聽器添加到父元素（它已經在頁面上），而不是直接將其添加到img本身。 – Sgnl

已經有類似的問題，問題解決了。請參閱[問題]（http://stackoverflow.com/questions/14258787/add-event-listener-on-elements-created-dynamically） –

如果您嘗試使用此代碼：

var myElement = document.getElementById("imageId"); 
if (myElement) { 
     document.getElementById("imageId").addEventListener("click", function() { 

    alert("hello"); 

}); 
} else { 
    alert("Element does not exist yet"); 
}

，你會看到一個警告，告訴您該元素尚不存在。您需要確保在嘗試添加元素存在的處理程序時。您可以使用負載處理程序來達到此目的。

來源

2016-11-04 10:54:34

試試這些，我希望它能適用於它爲我工作的動態圖像。代替'img_id'給這些圖片的ID點擊將正常工作。

$('#img_id').on('click', function() { 
      alert("Image Success"); 
    });

來源

2016-11-04 11:39:04 Venkatachalam

在動態創建的圖像中的onclick函數不起作用

回答

相關問題