javascript - クリックイベントでjquery "on"イベントが発生しませんか?

Question

何らかの理由で、クリックイベントに対して "on" イベントを発生させることができません。呼び出しと HTML は次のようになります。

HTML:

<a class="cmt-replies-show" href="javascript:void(0)" id="cmt-count" style="">
  <span>View All</span>
</a>

jQuery:

$('.cmt-replies-show').on("click", function(e) {
  e.preventDefault();

  alert("Clicked");

});

私が見逃しているものはありますか？

score 3 · Accepted Answer

最も可能性の高い理由は、イベントをバインドするときに要素が DOM にないことです。

要素を動的に追加する場合は、次のようにします。

$(document.body).on("click", '.cmt-replies-show', function(e) {

スクリプトが要素の前のページに含まれている場合は、スクリプトを本文の最後に移動するか、readyイベントでコードを呼び出すことができます。

$(function(){
  $('.cmt-replies-show').on("click", function(e) {
    e.preventDefault();
    alert("Clicked");
  });
});

score 0 · Accepted Answer

DOM に動的に挿入された要素にアクセスしようとしている場合は、次の構文を使用する必要があります。

$(document).on('click', '.cmt-replies-show', function(e) { 
// your code goes here
});

はdocument、ドキュメントの準備ができたときに使用できる各親に置き換えることができます。

score 0 · Accepted Answer

ページにこのリンクを動的に挿入する理由を理解しています。DOM はすでに準備完了状態にあり、コードのこの部分が挿入されたときにすべての関数が読み取られました。

HTML を挿入するときは、クリック機能で要素をバインドします。

live() を使用すると、目的が解決するはずです-

 $('#yourLink').live('click', function(){
   //Your logic here
});

score 0 · Accepted Answer

ポールが言ったこと - DOM の準備ができたら、必ずイベントをバインドしてください。

参考までに、「on」で要素を直接ターゲットにしている場合は、 $('a').click(function(){...}); を使用できます。. 次のようにイベントを委任する場合は、「オン」がより便利です。

$('#container').on('click','a',function(){

});

5 に答える 5