Question

我有一个通过AJAX加载内容的网站。我需要将onclick处理程序附加到动态加载的某个div。如果我的主要javascript文件中已经定义了我的事件处理程序（我是否通过属性onclick="myFunc"通过标记将其附加到更迂腐的addEventListener上），它可以正常工作。

但是，我希望在动态加载内容的<script>标记中定义此事件处理程序。然后它不起作用，<script>function myHandler(){}</script>是<div onclick='myHandler();'>之前还是之后。

我试图在XmlHttpRequest结束时附加它：

contentDiv.innerHTML = xhr.responseText;
var handlerName = getItFrom(xhr.responseText); 
var clickFn = window[handlerName];
loadedDiv.addEventListener('click', clickFn);

两者都不起作用：handlerName是正确的，但clickFn仍未定义......

我更喜欢纯粹的js答案，但如果我可以轻松翻译，jquery就可以了。

Answer 1

如果getItFrom(xhr.responseText);返回全局范围中定义的函数，请尝试添加如下引号：

var clickFn = window['handlerName'];

因为控制台说：

var luck = function(){}; window[luck];
> undefined
var luck = function(){}; window['luck'];
> function luck()

Answer 2

如果您愿意使用jQuery，这是可行的，在这里我从html字符串的脚本标记中分配一个事件处理程序。有几件事，你传递给.html的参数必须是你的字符串的jQuery对象，你需要在字符串中用</script>替换<\/script>（可以使用{ {1}}）。

.replace

$('#content').html($("<span>before</span><script>$('#testo').click(function () { alert('infunc');});<\/script><span>after</span>"));

将动态加载的javascript事件处理程序附加到动态加载的HTML

2 个答案: