92

ここで私が犯す可能性のあるよく知られた間違いはありますか?

要素が動的に生成され、機能していないため、.on() を使用しているスクリプトがあります。テストするために、セレクターを静的な動的要素のラップに置き換えましたが、それでも機能しませんでした! ただし、ラップ用にプレーンな古い .click に切り替えたときは機能しました。
(これは明らかに重要な動的要素では機能しません。)

これは機能します：

$("#test-element").click(function() {
    alert("click");
});

これはしません:

$(document).on("click","#test-element",function() {
    alert("click");
});

アップデート：

Chromeで右クリックして「要素の検査」を実行して、何かを再確認した後、クリックイベントが機能しました。リフレッシュしても機能せず、要素を検査したところ、機能しました。これは何を意味するのでしょうか？

4

6 に答える 6

166

ドキュメントへのバインドに正しい構文を使用して、id="test-element" を持つ要素のクリック イベントをリッスンしています。

次のいずれかが原因で機能していない可能性があります。

  • 最近のバージョンの jQuery を使用していない
  • DOM 対応の内部にコードをラップしない
  • または、イベントがドキュメントのリスナーにバブルアップしない原因となる何かを行っています。

イベントリスナーを宣言した後に作成された要素でイベントをキャプチャするには、親要素、または階層の上位の要素にバインドする必要があります。

例えば：

$(document).ready(function() {
    // This WILL work because we are listening on the 'document', 
    // for a click on an element with an ID of #test-element
    $(document).on("click","#test-element",function() {
        alert("click bound to document listening for #test-element");
    });

    // This will NOT work because there is no '#test-element' ... yet
    $("#test-element").on("click",function() {
        alert("click bound directly to #test-element");
    });

    // Create the dynamic element '#test-element'
    $('body').append('<div id="test-element">Click mee</div>');
});

この例では、「ドキュメントにバインド」アラートのみが発生します。

JSFiddle と jQuery 1.9.1

于 2013-07-11T23:58:27.050 に答える
13

コードは機能するはずですが、答えが役に立たないことは承知しています。ここで実際の例を見ることができます (jsfiddle)。

Jクエリ:

$(document).on('click','#test-element',function(){
    alert("You clicked the element with and ID of 'test-element'");
});

誰かがすでに指摘したように、クラスの代わりに ID を使用しています。ページに ID を持つ要素が複数ある場合、jquery はその ID を持つ最初の要素のみを返します。そのように動作するため、エラーは発生しません。これが問題である場合、クリック イベントは最初のイベントでは機能しますが、後続のイベントでは機能しtest-elementないことがわかります。

これが問題の症状を正確に説明していない場合は、セレクターが間違っている可能性があります。あなたの更新により、要素を検査してからページを再度クリックしてクリックをトリガーしたため、これが事実であると私は信じています。documentこれを引き起こしている可能性があるのは、イベントリスナーをではなく実際に配置した場合ですtest-element。その場合、ドキュメントをクリックして元に戻すと (開発者ウィンドウからドキュメントに戻るなど)、イベントがトリガーされます。この場合、2 つの異なるタブ間をクリックすると、クリック イベントがトリガーされることにも気付くでしょう (これらは 2 つdocumentの異なる であるため、ドキュメントをクリックしているためです。

これらのいずれも答えでない場合、HTML を投稿することは、それを理解するのに大いに役立ちます。

于 2013-07-12T00:03:35.667 に答える
5

古い投稿ですが、同じケースがあるので共有したいと思いますが、ようやく問題を知りました:

問題は、HTML要素を指定して動作する関数を作成するが、この関数に関連するHTML要素がまだ作成されていないことです（要素が動的に生成されたため）。機能させるには、要素を作成すると同時に関数を作成する必要があります。それに関連する関数を作るよりも最初に要素。

簡単に言えば、関数はその前に作成された要素 (彼)​​ に対してのみ機能します。動的に作成された要素は、彼の後にあることを意味します。

ただし、上記のケースに注意を払わなかったこのサンプルを調べてください。

<div class="btn-list" id="selected-country"></div>

動的に追加:

<button class="btn-map" data-country="'+country+'">'+ country+' </button>

この機能は、ボタンをクリックすることでうまく機能しています:

$(document).ready(function() {    
        $('#selected-country').on('click','.btn-map', function(){ 
        var datacountry = $(this).data('country'); console.log(datacountry);
    });
})

または、次のように body を使用できます。

$('body').on('click','.btn-map', function(){ 
            var datacountry = $(this).data('country'); console.log(datacountry);
        });

これと比較して、機能していません：

$(document).ready(function() {     
$('.btn-map').on("click", function() { 
        var datacountry = $(this).data('country'); alert(datacountry);
    });
});

それが役立つことを願っています

于 2016-09-27T14:02:40.840 に答える