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

Posted 2023-03-05

【中文标题】将动态加载的 javascript 事件处理程序附加到动态加载的 HTML [重复]

【英文标题】：Attach dynamically loaded javascript event handler to dynamically loaded HTML [duplicate]

【发布时间】：2017-12-09 21:02:54

【问题描述】：

我有一个通过 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 也可以。

【问题讨论】：

在哪里定义了window[handlerName]，又在哪里定义了loadedDiv？

没有人再用这种方式编写前端代码了 :( 但是如果你必须给 分配一个 id ，然后通过将事件侦听器附加到你的 html 元素来处理加载事件......或者你可以拿起 webpack 并做出反应，让你的生活更轻松

@Kosh window[handlerName] 只是一种通过名称获取函数对象的方法。如果在可以工作的主要 javascript 中定义了 handlerName。 loadedDiv 当然是通过document.getElementById 给出的。我只是跳过了这些细节，因为它们无关紧要。

@Dmitry 是完全一样的问题：如果onload事件监听器是通过动态内容发送的，就不起作用了。

@James 谢谢！我错过了这篇文章。所以，它不起作用，期间。似乎唯一的解决方案是将脚本作为文件加载，但不能包含在 innerHTML 中。

【参考方案1】：

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='content'></div>
<button id='testo'>Click</button>

【讨论】：

谢谢。我相信在内部 jQuery 正在抓取脚本文本并使用 eval (?)。无论如何我不能使用这个解决方案。最后我决定做我已经做的事情：在我的主 javascript 文件中预定义所有脚本。

【参考方案2】：

如果getItFrom(xhr.responseText); 返回一个在全局范围内定义的函数，请尝试像这样添加引号：

var clickFn = window['handlerName'];

因为控制台说：

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

【讨论】：

感谢您的尝试。但是 handlerName 已经是一个字符串。无论如何，如此答案所示，这是不可行的：[link]***.com/questions/4619668/… 除非从外部链接获取脚本。

你能告诉我那个字符串包含什么吗？