Question

我有一些动态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。注意只有来自给定全局对象的第一个被拒绝的属性访问才会报道。

Answer 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');
});

这应该会有效！干杯! =）

firefox - 无法接收动态JavaScript的事件

1 个答案: