9

jQuery のonイベント ハンドラーは、動的に作成された要素を「リッスン」できるように設計されており、live. ただし、私が経験したことは、使用は成功しているのに、使用onはクリックイベントをキャプチャしていないということです!live

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

これは、私が達成しようとしていたことの簡略化されたバージョンです（ に包まれてい$(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");
});

のドキュメントから、これを見つけました。これは、イベントonの作成にどのように取り組んでいたかです。on

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

ただし、何らかの理由で、live期待どおりに動作しますonが、失敗しています。

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

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

この問題に近い 2 つの jsFiddle を次に示します。両方のインスタンスで「テスト」という単語をクリックして、異なる動作を確認します。コードの唯一の違いは、 for を置き換えるonことですlive。

によってクリックがキャプチャされる場所live。

クリックがキャプチャされない場所on(何も起こらないことを確認するには、[テスト - クリックしてください] をクリックします)。

on不適切に使用したり、意図していないことを要求したりするだけかもしれませんが、なぜ機能しないのか知りたいです (ただし、非常に賢いものがある場合は、自由に共有してください)。あなたの知恵をありがとう！

更新/回答/解決策:

ユーザー「未定義」によると、違いは、オブジェクトonの上部から完全に委任されていないのに対し、委任されている/そうであるということです。documentlive

クラウディオが言及しているように、on動的に作成された要素を参照するドキュメントの$("")部分があり、クエリの一部に含めるものは実行時に存在する必要があります。

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

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

本当にありがとう！

4

2 に答える 2

10

liveonメソッドを使用してイベントを委任する場合は、要素またはオブジェクトonの静的な親のいずれかからイベントを委任する必要があります。document

$(document).on("click", ".clickHandle", function() {
    alert("Content clicked");
});
于 2012-10-02T12:26:14.903 に答える
4

問題は、イベントを添付する要素が存在する必要があることです。

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

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

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

セレクターが省略されているか null の場合、イベント ハンドラーは直接または直接バインドされていると見なされます。ハンドラーは、選択した要素でイベントが発生するたびに呼び出されます。イベントが要素で直接発生するか、子孫 (内部) 要素から発生するかは関係ありません。

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

イベント ハンドラーは、現在選択されている要素にのみバインドされます。コードが .on() を呼び出すときに、ページに存在する必要があります。要素が存在し、選択できることを確認するには、ページの HTML マークアップにある要素のドキュメント対応ハンドラー内でイベント バインディングを実行します。新しい HTML がページに挿入されている場合は、要素を選択し、新しい HTML がページに配置された後にイベント ハンドラーを添付します。または、次に説明するように、委任されたイベントを使用してイベント ハンドラーをアタッチします。

詳細については、こちらのダイレクト イベントと委任イベントの セクション をご覧ください。

于 2012-10-02T12:25:51.903 に答える