firefox - 无法接收动态 javascript 的事件
Posted
技术标签:
【中文标题】firefox - 无法接收动态 javascript 的事件【英文标题】：firefox - unable to receive event for dynamic 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。注意 只有来自给定全局对象的第一个被拒绝的属性访问才会 被举报。
【问题讨论】：
【参考方案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以上是关于firefox - 无法接收动态 javascript 的事件的主要内容，如果未能解决你的问题，请参考以下文章
jQuery clone() FireFox 错误 - 无法提交克隆的表单
Android - 在动态注册的广播接收器上出现“无法传递广播”错误