firefox - 无法接收事件动态javascript

问题描述：

我有一些动态的JavaScript，创建元素，与一个单击事件元素处理程序...该脚本是从另一个域包含。firefox - 无法接收事件动态javascript

但是，在运行时，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。请注意，只有来自给定全局对象的第一个被拒绝的属性访问将被报告为。

答

我在这里试过了你的代码，它在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'); 
});

这应该使它的工作！干杯！ =）

import jQuery？只是为了解决它？你在开玩笑吗？ – jno

好吧，我怀疑他只会使用它一次。而且，如果他正在使用动态html元素，那么YES，我强烈建议他使用JQuery来处理它们。 JQuery基本上是用于实时DOM处理和交叉浏览。另外，这是简单的方法，并会让他开始，他可以从那里演变。我相信人们很聪明！ =）此外，我更愿意帮助他得到他需要做的任何事情，而不是批评傲慢的人试图帮助，而没有提供任何解决问题的办法：这样做似乎太少了。 = P – Vinas

firefox - 无法接收事件动态javascript

相关推荐