外部にロードされたHTMLファイルのボタンは機能しません。

Question

私はAJAXを使用してhtmlファイルをロードしています。各htmlファイルには、投票アップと投票ダウンボタンがあります。

これらの2つのボタンを実行するスクリプトは、メイン（インデックス）htmlファイルのdocument.ready関数内にあります。

メインファイルにhtmlを直接挿入すると、document.ready機能が動作します。 しかし、私はhtmlファイルをロードすると、document.readyの内容は実行されません。

私は間違っていますか？

Answer 1

ajaxでロードされた要素は、ドキュメントの準備ができても存在しなかったため、document.readyで定義されたイベントにバインドされません。

ライブまたはをに設定する必要があります。例えば

：

$('#buttonLoadedUsingAjax').live('click', function() {}); 

または使用している場合はjqueryの> 1.7：ボタンが存在し前

$(document).on("click", "#buttonLoadedUsingAjax", function(){ }); 

Answer 2

あなたのボタンにイベントハンドラをバインドするスクリプトが新しく、実行されているので追加されたボタンにはイベントハンドラはありません。

ボタンの親要素にイベントハンドラをアタッチし、イベントオブジェクトのtargetプロパティを使用して、ボタンがクリックされたかどうかを調べることができます。これにより、動的に生成されるボタンも確実に機能します。

jQueryを使用している場合は、on（）メソッドを使用できます。

Answer 3

Ajaxでロードすると、関数はで、すでにが実行されています。それが再び実行されることは何も起こりません。

イベントハンドラを要素に直接バインドする代わりにevent delegationを使用します。