如何使用純Javascript將動態創建的div添加到onclick函數中

我目前使用下面的代碼在一個函數中基於XML文件動態創建div。如何使用純Javascript將動態創建的div添加到onclick函數中

var ftdImg = "<div class='single-img' id='" + pid + "'><a href='#'><img src='" + projHomeThumbURL + "'/></a><p>" + titleEdit(projName) + "</p><p>" + titleEdit(projCat) + "</p><p>" + projDate + "</p></div>"; 
var divTag = document.createElement("div"); 

function createNew(standIn) { 
    divTag.innerHTML = standIn; 
    document.getElementById("container").appendChild(divTag); 
}

目前，此代碼正常工作。我想補充一個上點擊功能，取代的「替身」的innerHTML，這是我的情況下，無功ftdImg，與projImgTag：

var projImgTag = "<div class ='project-image "+projName+"' id='"+pid+"'><a href='"+projFull+"'><img src='"+projThumb+"/></a></div>";

來源

2014-09-30 twario

這種編程方式是如此的嚴重缺陷，它讓我無語。我們在什麼時候決定構建DOM，是通過一串意大利麪串聯串來完成的？誰將維護這些代碼？如果你想構建一個DOM使用DOM API。或者，使用模板語言，其中有幾十個甚至幾百個。我們什麼時候決定網絡編程是關於在點擊處理程序中用其他blob替換巨大的DOM blob？使用CSS類來選擇要顯示，隱藏或更改的元素。點擊處理程序應該能夠使用單個類分配來完成其工作。 – 2014-09-30 17:34:36

爲什麼不使用jQuery？它會非常簡單（對不起，我不能讀你的意大利麪代碼） – starvator 2014-09-30 17:35:02

@torazaburo這是一個反應有點苛刻，它可能是一個初學者。是的，這是非常糟糕的做法，但我們可以調低迴應。 @ starvator雖然jQuery是一個合適的解決方案，但也有香草JS的方式來做到這一點，他們並沒有那麼困難 – casraf 2014-09-30 17:38:09

處理點擊的香草 JS DOM事件是onclick()：

MDN's docs for .onclick()

var divTag = document.createElement("div"); 
divTag.onclick = function() { 
    /* ... */ 
};

編輯

除了由指出torazaburo，文檔添加了：

您可能傾向於使用EventTarget.addEventListener（）方法，因爲它是更靈活和DOM事件規範的一部分。

例子：

var divTag = document.createElement("div"); 
divTag.addEventListener("click", function() { 
    /* ... */ 
}, false);

來源

2014-09-30 17:35:42 LcSalazar

注意該頁面上的註釋：「您可能傾向於使用EventTarget.addEventListener（）方法，因爲它更靈活並且是DOM Events規範的一部分。」 – 2014-09-30 17:37:37

@torazaburo - 注意。更新。 – LcSalazar 2014-09-30 17:41:47

我自己想出了自己的錯誤，但是非常感謝 – twario 2014-10-02 08:52:26

如何使用純Javascript將動態創建的div添加到onclick函數中

回答

相關問題