Javascript 将innerHTML传递给元素并附加事件

我必须使用JavaScript函数将

innerHTML

传递给一个div。
我传递的

innerHTML

还有一个

div

，我必须为其附加一个click事件，以便在单击它时，元素响应click事件

我这里有一把小提琴来解释这个问题：

HTML

JavaScript

window.onload = function(){usersFunction();};

function usersFunction(){
    var someHtml = '<div> <div class ="btnSettings"> </div> <span></span> </div>';
    changeSource(someHtml);
}

function changeSource(newSource){
    document.getElementById("containerFrame").innerHTML = newSource;
}

window.onload=function（）{usersffunction（）；}；
函数usersFunction（）{
var someHtml=''；
changeSource（someHtml）；
}
函数changeSource（newSource）{
document.getElementById（“containerFrame”）.innerHTML=newSource；
}

---

在传递源代码时，如何告诉JavaScript函数，这个被传递的HTML还有一些元素必须绑定到一个点击事件？

< p>如果你必须这样做，你可以考虑在HTML字符串本身中添加点击句柄：

var someHtml = '<div> <div class ="btnSettings" onclick="return myFunction()"> </div> <span></span> </div>';

---

我想你需要这样的东西：

document.getElementById("containerFrame").onclick = function() {
    // put your function here
};

---

这是一个优雅的方法还是没有其他方法？由于用户正在传递

源代码

，这是否意味着他也将附加click事件？但正如我所说的，当我在插件中点击那个特定的按钮时，我也必须传递额外的信息。在这种情况下我将如何处理它？我尝试了

returnmyfunction（）

。无法让lcikc事件在那个红色分区上工作。@user1240679不，我不会说它很干净；用另一种方法更新了答案。@user1240679好吧，你定义了

myfunction（）

？我找到了正确的div。但是该函数在插件中，我不确定是否应该硬编码以找到正确的div来将事件处理程序附加到它。这还可以用某种方式即兴创作吗？假设用户更改传递的

按钮div

的类，将如何处理？请查看小提琴。我认为你的理解有差距。

var frame = document.getElementById('containerFrame');
frame.innerHTML = newSource;
var settings = frame.getElementsByClassName('btnSettings')[0];

// depends on the browser, some IE versions use attachEvent()
settings.addEventListener('click', function(event) {
}, false);

document.getElementById("containerFrame").onclick = function() {
    // put your function here
};