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

【问题标题】：Passing innerHTML to an element and attaching event将 innerHTML 传递给元素并附加事件
【发布时间】：2013-03-09 13:31:35
【问题描述】：

我必须使用我的 JavaScript 函数将 innerHTML 传递给 div。
我传递的 innerHTML 也有一个 div，我必须为其附加一个点击事件，以便在点击它时，元素响应点击事件。

我在这里有一个小提琴来解释这个问题： http://jsfiddle.net/K2aQT/2/

HTML

<body>
    <div id="containerFrame">
    </div>
</body>

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;
}

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

【问题讨论】：

标签： javascript html events callback

【解决方案1】：

如果你必须这样做，你可以考虑在 HTML 字符串中添加点击处理程序：

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

或者，修改.innerHTML后，找到正确的<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);

【讨论】：

这是一种优雅的方法还是没有其他方法？由于用户正在传递source，这是否意味着他也会附加点击事件？但正如我所说，当从我的插件内部单击该特定按钮时，我还必须传递其他信息。在这种情况下我将如何处理？
我尝试使用return myfunction()。无法让 lcikc 事件在该红色 div 上工作。 jsfiddle.net/9LJBY/1
@user1240679 不，我不会说它很干净；用另一种方式更新答案。
@user1240679 好吧，你定义myfunction()了吗？
我找到了正确的 div。但是该函数在插件中，我不确定是否应该硬编码以找到正确的 div 以将事件处理程序附加到它。这还能以某种方式即兴创作吗？假设用户更改了传递的button div 的类，那将如何处理？

【解决方案2】：

我认为你需要这样的东西：

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

【讨论】：

请看小提琴。我认为您的理解存在差距。