firefox - 无法接收动态 javascript 的事件答案

【问题标题】：firefox - unable to receive event for dynamic javascriptfirefox - 无法接收动态 javascript 的事件
【发布时间】：2015-12-23 15:40:33
【问题描述】：

我有一些创建元素的动态 javascript，带有一个 click 事件元素处理程序...该脚本是从另一个域中包含的。

但是，在运行时使用 Firefox，它会发出安全警告并且不处理点击事件（Chrome 工作正常）。

下面是简化版

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"></head>
<body>
<h2 id="headertitle">TEST</h2>
<br/>

<script type="text/javascript" src="somewhereelse.com/script.js">
</script>
</body>
</html>

Javascript 包括：

document.getElementById("headertitle").insertAdjacentHTML('beforeBegin',
            "<button value='TEST' onclick='clickHandler(this)' >Button</button>");

function clickHandler(evt){
    alert("clicked");
}

警告信息：

安全包装器拒绝访问特权未定义的属性 Javascript 对象。支持将特权对象暴露给通过 exposedProps 获得的不受信任的内容正在逐步删除 - 改用 WebIDL 绑定或 Components.utils.cloneInto。注意只有来自给定全局对象的第一个被拒绝的属性访问才会被举报。

【问题讨论】：

标签： javascript firefox dynamic

【解决方案1】：

我在这里尝试了您的代码，它在 Firefox 50.1.0 上运行良好。 =/

但是，我强烈建议您使用 JQuery 来处理由动态创建的元素触发的事件。 JQuery 以不同的方式处理 DOM，它是跨浏览器的，它就是为这种情况而设计的。它可能会解决您的问题。 =D

尝试将您的 html 更改为

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"></head>
<body>
<h2 id="headertitle">TEST</h2>
<br/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="somewhereelse.com/script.js">
</script>
</body>
</html>

和你的 JS 代码

document.getElementById("headertitle").insertAdjacentHTML('beforeBegin',
            '<button value="TEST" class="clickable" id="btn1">Button</button>');

$('.clickable').on('click', function() {
    alert($(this).attr('id') + ' was clicked');
});

这应该可以正常工作！干杯! =)

【讨论】：

导入 jQuery？只是为了修复它？你在开玩笑吗？
好吧，我怀疑他只会使用一次。而且，如果他正在使用动态 html 元素，那么是的，我强烈建议他使用 JQuery 来处理它们。 JQuery 基本上是为实时 DOM 操作和交叉浏览而设计的。另外，这是一种简单的方法，可以让他开始，他可以从那里自己进化。我相信人是聪明的！ =) 此外，我宁愿帮助他完成他需要做的任何事情，而不是傲慢地批评那些试图提供帮助的人，而不提供任何解决问题的方法：这样做似乎太幼稚了。 =P