web-dev-qa-db-ja.com

$（document）.on（ "クリック" ...機能していませんか？

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

要素が動的に生成され、動作していないため、.on（）を使用したスクリプトを作成しました。テストするためだけに、セレクタを動的要素の折り返しに置き換えました。これは静的であり、それでも機能しません。ラップのために普通の.clickに切り替えたとき、それはうまくいきました。
（これは明らかに動的要素、つまり重要な要素には効果がありません）

これは動作します：

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

これは違います

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

UPDATE：

私は右クリックしてChromeで "Inspect Element"を実行して何かをダブルチェックしただけで、その後clickイベントが機能しました。私はリフレッシュしました、そしてそれはうまくいきませんでした。これは何を意味するのでしょうか？

jqueryclick
71
Mr. Lavalamp

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

次のいずれかが原因で、おそらく機能していません。

  • 最新バージョンの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>');
});

この例では、「ドキュメントにバインド」という警告のみが発生します。

jQuery 1.9.1によるJSFiddle

129
itsmejodie

あなたのコードは動作するはずですが、答えはあなたを助けないことを私は知っています。実用的な例を見ることができます here（jsfiddle） 。

Jquery：

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

誰かがすでに指摘したように、あなたはクラスの代わりにIDを使っています。ページ上にIDを持つ要素が複数ある場合、jqueryはそのIDを持つ最初の要素のみを返します。それがどのように機能するのかという理由でエラーはありません。これが問題であれば、clickイベントは最初のtest-elementに対してはうまくいくが、それ以降にはうまくいかないことに気づくでしょう。

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

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

9
smilebomb

古い記事ですが、私は同じ事件を抱えているので共有するのが大好きですが、ついに問題を知ったのです。

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

簡単に言うと、関数はその前に作成された要素（彼）に対してのみ機能します。動的に創造されたどんな要素も彼の後を意味します。

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

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

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

4
Sulung Nugroho

これは動作します：

<div id="start-element">Click Me</div>

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

$(document).on("click","#start-element",function() {
    $(this).attr("id", "test-element");
});

これが フィドル です

2
iGanja

これを試して：

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

それを行うためのドキュメントのやり方も変です。クラスセレクタに使用されている場合、それは私には意味がありますが、IDの場合はおそらく無駄なDOMがそこを横断しているだけです。 IDセレクタの場合は、その要素を即座に取得できます。

2
Eduárd Moldován