ajax読み込みコンテンツを操作するには？

Question

私はjquery.ajaxを介して外部のページをロードしています：example.htmlの

$("#mydiv").load("filter.html"); 

内容：

<div id="filterdiv"><input id="filter" name="filter" size="40"/></div> 

を、私は入力＃フィルタを操作したいので、私はJavaScriptで書いた：

$('#filterdiv input').focus(function(){ 
    alert(Hello); 
} 

何も起こりません。私が直接ページにfilter.htmlのコードを貼り付けた場合、それは動作しますが、私は、AJAXを経由して、それを呼び出したときに

$('#filterdiv input').focus(function(){ 
    alert(Hello); 
} 

は、Ajaxロードされたコンテンツは表示されません。なぜ私は間違っているのですか？どうやってAJAXのHTMLを操作できますか？

Answer 1

htmlがロードされた後にイベントハンドラを追加する必要があります。また、警告パラメータを引用していることに注意してください（実際に問題があるのか​​、あなたの質問のタイプミスなのかはわかりません）。

$("#mydiv").load("filter.html", null, function() { 
    $("#filterDiv input").focus(function() { 
     alert('Hello'); 
    }); 
}); 

あなたはlive方法によって処理される可能性のあるイベントのいずれかを使用していた場合は、ページの全体の生活のために一度、あなたのハンドラを設定することを使用することもできました。残念ながら、フォーカスイベントはそれらの1つではありません。 jQueryの1.3で追加されました

：すべての 現在のために（クリックなど）イベントにハンドラ をバインド - と未来 - マッチ 要素。カスタムイベントをバインドすることもできます。

可能なイベント値：クリックし、 DBLCLICK、マウスダウン、のmouseup、 のMouseMove、マウスオーバー、マウスアウト、 のKeyDown、キーの押下、keyUpイベント

は現在 サポートされていません：ぼかし、フォーカス、 のMouseEnter、mouseleave、変更を、

Answer 2

AJAXページが読み込まれた後にアクションを適用する必要があります。これは、AJAXページの最後に追加することを意味します。または、コールバック関数。

サーバー側プログラミングページとは異なり、ページが現在フェッチされている場合でも、ブラウザは次のコード行を実行し続けます。次の行で何か（クリックのような）をバインドすると、ページはおそらくロードされないので、バインドされません。

一方、コールバック関数は、AJAXページが実際にロードされたときにのみ実行されます。