2015-09-25 6 views
7

私は、clickイベント要素ハンドラで要素を作成するいくつかの動的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を代わりに使用しています。 与えられたグローバルオブジェクトから最初に拒否されたプロパティアクセスのみが報告されることに注意してください。

答えて

-1

ここでコードを試してみましたが、Firefox 50.1.0でうまく動作しました。 =/

ただし、動的に作成された要素によってトリガーされたイベントを処理するためにJQueryを使用することを強くお勧めします。 JQueryはDOMを別々に扱いますが、クロスブラウザーであり、このような状況のためだけに作られています。あなたの問題を解決するかもしれません。 = D

試してみて、それを動作させる必要があります

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

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

<!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コードにあなたのhtmlを変更! 乾杯! =)

+0

import jQuery?ちょうどそれを修正するには? R冗談ですか? – jno

+0

さて、彼はそれを一度しか使用しないだろうと思う。ダイナミックhtml要素で作業している場合はYES、彼はJQueryを使用してそれらを処理することを強くお勧めします。 JQueryは、基本的にライブDOMのmanupulationとクロスブラウジングのために作られています。 それは簡単な方法であり、彼はそこから自分自身で進化することができます。私は人々がスマートだと信じています! =) 私はむしろ助けようとしている人を傲慢に批判するよりも、彼が何か必要なものを手に入れるのを手伝っています。 = P – Vinas

関連する問題