javascriptを含む追加HTMLは実行されません。実行するにはどうすればよいですか？

StackOverflow https://stackoverflow.com/questions/608034

質問

JavaScriptを含むHTMLを追加しています。

<td onclick="toggleDay('+data+',this,\'tue\');">T</td>

and 

<img src="img/cross.png" onclick="deleteAlarm('+data+');">

これら2つのコードは、追加する大量のHTMLに含まれています。

ページの読み込み時に既に存在していても問題なく機能しますが、追加時には機能しません。

私に何をするよう勧めますか？ DOMが追加または後にJavaScriptを再解釈するためのソート要求が必要ですか？

編集：

もう少し情報があります。私はこの問題に取り組んでいます。なぜなら、AJAXを使ってデータベースに何かを追加し、成功したらhtmlを必要な場所に追加するからです。 SOがコメントに対して行うのと同じように。

Edit2：

それについてのすべての議論でさえ、答えに感謝して、それを機能させました。

役に立ちましたか？

解決

このようにします：

まず、htmlにid属性を追加します：

<td id="toggleDayCell">T</td>

<img src="img/cross.png" id="crossImg">

次に、ページのonloadイベントで実行され、関心のあるイベントにアタッチするJavascriptがあります。

PrototypeJS では、次のようになります。

Event.observe(window, 'load', function(){
  if( $('toggleDayCell') ) {
    Event.observe( $('toggleDayCell'), 'click', function(event){
      //do stuff here
    }
  }

  if( $('crossImg') ) {
    Event.observe( $('crossImg'), 'click', function(event) {
       //do stuff here
    }
  }
});

Prototype（またはjQuery）のようなものを使用すると、ブラウザ間の互換性が考慮されるため、便利です。

他のヒント

AJAX経由でHTMLを追加していますか？その場合、返すJavaScriptを手動でeval（）する必要があります。応答をdivにラップして、次のようなことを行うことができます。

wrapper.getElementsByTagName("script")
// for script in wrapper...
eval(script.innerHTML)

プロトタイプのようなライブラリを使用している場合、応答をevalScripts（）メソッドに渡すことができるため、はるかに簡単になります。

HTMLをドキュメントに追加し、プログラムでonclickイベントをオブジェクトに追加します。

これは私の頭上ではありませんが...この方法でできると思います：

IE：

Object.onclick = someFuntion

FF：

Object.addEventListener('click', someFunction);

AJAXにはいくつかの癖があります...特にIEでは。例：innerHTMLプロパティを使用して、（IEの）テーブル要素に何かを挿入/更新することはできません。 DOM関数を使用して、要素ノードを挿入/更新/削除（またはイベントハンドラーを追加）することをお勧めします。上記のeval（）関数を使用して、DOMオブジェクトを使用してドキュメントを変更する動的にロードされたJavaScriptを実行できます。

innerHTMLなどでonclickを設定する代わりに、 addEventListener（ 'click'、/*...*/)を使用する必要があります 。

IEは addEventListener を完全に別のものに呼び出すため、それも補正する必要があります。

（編集：IEはそれを attachEvent（）と呼びます。これが何らかの役に立つことを願っています。）

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top