動的に生成されたモーダルポップアップにjQuery 'on'が登録されていません

Question

jQueryのonイベントハンドラは、動的に作成された要素を '聴く'ことができ、振る舞いをliveに置き換えることになっていたという印象を受けました。しかし、私が経験したことはonを使用して成功してliveを使用し、一方、クリックイベントをキャプチャされていないということです！

私の状況のトリッキーな側面は、コンテンツを動的に作成するだけでなく、AJAX .get()コールを使用して結果のHTMLをモーダル.dialog() jQueryUIポップアップに挿入することです。

$.get("getUserDataAjax.php", queryString, function(formToDisplay) { 
    $("#dialog").dialog({ 
     autoOpen: true, 
     modal: true, 
     buttons... 
    }).html(formToDisplay); 
}); 
$(".classThatExistsInFormToDisplay").on("click", function() { 
    alert("This doesn't get called"); 
}); 

onのドキュメントから、私は私が私のonイベントを書いて近づいていた方法だったこれこれを見つけた：ここ

は（ $(document).ready(...)に包まれた）私が達成しようとしたものの簡易版である

$("p").on("click", function(){ 
    alert($(this).text()); 
}); 

しかし、何らかの理由で、liveは、私が期待どおりに動作します - onが私を失敗しているのに対し。

私はそれ内部function(formToDisplay)コールバック宣言する場合onは（キャプチャクリックを）成功することを発見したので、これは「をどのように私はそれを動作させることができます」の問題ではありません。

質問：onモーダルポップアップ内で動的に作成された要素が見つかりませんでしたか？私のjQueryインスタンスはjquery-1.7.2です。 jQueryUIは1.8.21です。

は、ここで問題に近似する2 jsFiddlesです。別の動作を確認するために両方のインスタンスに単語「テスト」をクリックしてください。コード内の唯一の違いは、liveためonを置換されています。 the clickがliveによって捕獲され

。

onでキャプチャされていないthe click（「テスト - クリック」をクリックしても何も起こりません）。

は私がちょうど不適切onを使用して、または意図されていなかった何かをすることを求めてすることができる実現が、私が知りたいなぜそれが機能していない（しかし、あなたはひどく巧妙な何かを持っている場合は、共有すること自由に感じ）。あなたの知恵をありがとう！

更新/回答/ソリューション：

ユーザーによると、違いはonがliveがないのに対し、documentオブジェクトの上からすべての方法を委任されていないということである、「未定義」/です。クラウディオが言及したよう

は、そこに動的に作成された要素を参照on文書の一部であり、その何を実行に存在する必要がクエリの$("")一部に含まれています。

私の新しい解決策は次のとおりです。キャプチャクリックイベントonモーダルダイアログボックス。実行時にイベントが作成されたときにコンテンツはありませんが、生成される特別なクラスのコンテンツと要素を見つけることができます後で。

$("#dialog").on("click", ".classThatExistsInFormToDisplay", function() { 
    ... //(success! Event captured) 
}); 

ありがとうございます！

Answer 1

live代表者イベントが、on doesnのに見てください、イベントハンドラをアタッチするか、使用委任イベント「T、あなたはonメソッドを使用してイベントを委任する場合、あなたは要素の静的な両親の一つまたはdocumentオブジェクトからイベントを委任する必要があります

$(document).on("click", ".clickHandle", function() { 
    alert("Content clicked"); 
}); 

Answer 2

問題は、イベントをアタッチする要素が存在しなければならないということです。

あなたが使用する該当既存のコンテナを持っていない場合は、セレクタ場合、あなたは$("body")または$(document)

を使用することができ、動的に

$("#existingContainerId").on("click", "p", function(){ 
    alert($(this).text()); 
}); 

作成pタグのクリックをキャプチャするために、このようなonを使用する必要がありますが省略された場合、またはnullの場合、イベントハンドラは直接または直接バインドと呼ばれます。このハンドラは、選択された要素でイベントが発生するたびに呼び出されます。要素に直接発生するか、子孫（内部）要素から発生するかに関係なく発生します。

セレクタが提供される場合、イベントハンドラは委任されたと呼ばれます。バインドされた要素でイベントが直接発生したときにハンドラが呼び出されるのではなく、セレクタに一致する子孫（内部要素）に対してのみハンドラが呼び出されます。 jQueryはイベントをイベントターゲットからハンドラがアタッチされている要素（つまり最も内側の要素から最も外側の要素）までバブリングし、セレクタに一致するそのパスに沿った任意の要素のハンドラを実行します。

イベントハンドラは現在選択されている要素にのみバインドされています。コードが.on（）を呼び出すときにページに存在する必要があります。要素が存在し、選択できるようにするには、ページ上のHTMLマークアップ内にある要素のために、文書レディハンドラ内でイベントバインディングを実行します。新しいHTMLがページに挿入されている場合は、新しいHTMLがページに配置された後で要素を選択し、イベントハンドラをアタッチします。次

を説明したセクション直接委任イベントhere詳細は、ドキュメントオブジェクトから