[Ajax] 動的に生成されたモーダルポップアップに登録していないjQuery 'on'



Answers

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

このようにしてon動的に作成されたpタグのクリックをキャプチャする必要があります

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

関連する既存のコンテナがない場合は、 $("body")または$(document)を使用して、

selectorが省略された場合、またはnullの場合、イベントハンドラは直接または直接バインドと呼ばれます。 このハンドラは、選択された要素でイベントが発生するたびに呼び出されます。要素に直接発生するか、子孫(内部)要素から発生するかに関係なく発生します。

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

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

詳細は、 直接イベントと委任イベントを 参照してください。

Question

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

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

ここに私が達成しようとしていたもの( $(document).ready(...)れたもの)の簡略版があり$(document).ready(...)

$.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");
});

のドキュメントから私は私のイベントを書くのに近づいていたこれを見つけました:

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

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

これは function(formToDisplay)コールバック内で宣言すると、 onが成功する(クリックをキャプチャする)ことがわかったので、「どのように動作させるか」という質問ではありません

私の質問は 、モーダルポップアップ内で動的に作成された要素を見つけられないという点で何が間違ってonますか? 私のjQueryインスタンスはjquery-1.7.2です。 jQueryUIは1.8.21です。

問題を近似する2つのjsFiddlesがあります。 両方のインスタンスで「Test」という単語をクリックすると、異なる動作が表示されます。 コードの唯一の違いはliveために置き換えon liveです。

クリックliveでキャプチャされる場所。

クリックonキャプチャされonない場所(「テスト - クリック」をクリックすると何も起こりません)。

私はちょうど不適切に使用onたり、意図しない何かをするように頼んでいるかもしれませんが、 なぜそれが動作していないのを知りたいのです(しかし、あなたが何かひどく賢いことがあれば、 あなたの知恵をありがとう!

更新/解答/解決策:

ユーザ 'undefined'によると、 ondocumentオブジェクトの先頭からずっと委譲さonていませんが、 liveはdo / isです。

Claudioが述べているように、動的に作成された要素を参照するonドキュメントの部分があり、 実行時にクエリの$("")部分に含めるものが存在する必要があります

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

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

本当にありがとう!




Links