委任されたイベントでJqueryが要素をクリック

私は同様の質問を見たことがありますが、この問題は解決しません。私はこのようになりますHTMLがあります。だから、委任されたイベントでJqueryが要素をクリック

<div id="products" class="container-fluid"> 
    <div class="selected_product_div panel panel-default"> 
      <div class="panel-body"> 
       <a style="{cursor: pointer;}" class = "delete_product pull-right"><i class="fa fa-close"></i></a>     
      </div> 
     </div> 
    </div> 
</div>

を、委任イベントトリガの後、私は<a class="delete_product"></a>要素を取得したいのですが。しかし、$(this)は、親の<div id="products>要素を意味します。

$("#products").on("click",".delete_product", function(){    
     console.log($(this).hasClass(".delete_product")); 
}

もちろん、コンソールはfalseを記録します。クリックされた要素を取得するにはどうすればよいですか？

$(this).find(".delete_product")は、delete_productクラスの要素が多数あるため、オプションではありません。

出典

2016-09-05 alejoss

あなたはそれのためのvar宣言を使用することができます。 'var = $（this）.find（ '。delete_product'）;'関数の内部では、そのボタンを変数に入れます。または私は間違っていますか？ – Mardzis

@Mardzis '.delete_product'クラスには多くの要素があるので、これを行うことはできません。 – alejoss

'$（this）'はあなたのリンクでなければなりません – putvande

これを試してみてください：

$(document).ready(function(){ 

    $("#products").on("click",".delete_product", function(){ 

     alert($(this).hasClass("delete_product")); 

    }) 

})

最終的なコードを：

<html> 
 
    <title>This is test</title> 
 
    <head> 
 
     <style> 
 
     </style> 
 
    </head> 
 
    <body> 
 
     
 
     <div id="products" class="container-fluid"> 
 
      
 
      <div class="selected_product_div panel panel-default"> 
 
       
 
        <div class="panel-body"> 
 
         <a class = "delete_product pull-right" href="#"><i class="fa fa-close">Click Me!</i></a>     
 
        </div> 
 
       
 
      </div> 
 
      
 
    </div> 
 
     
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     <script> 
 
      
 
     $(document).ready(function(){ 
 

 
      $("#products").on("click",".delete_product", function(){ 
 

 
       alert($(this).hasClass("delete_product")); 
 

 
      }) 
 

 
     }) 
 
     
 
     </script> 
 
    </body> 
 
</html>

出典

2016-09-05 19:30:45 Ehsan

hasClass引数にドットを入れてはいけません。それは、セレクタではありませんが、あなたが渡す名前：

$("#products").on("click",".delete_product", function(){ 
    console.log($(this).hasClass('delete_product')); 
});

jQueryのははthisとしてセレクタにマッチする要素を提供しません。 jQuery documentationで述べたように：

jQueryのハンドラを呼び出すと、thisキーワードイベントが配信されている要素への参照です。 [...]委任されたイベントの場合、これはselectorと一致する要素です。唯一の情報については

：

$("#products").on("click",".delete_product", function(){ 
    console.log($(this).is('.delete_product')); 
});

出典

2016-09-05 18:56:32 trincot

問題が何であるか説明してもらえますか？ – trincot

あなたがイベントのtargetプロパティを使用する必要があります：あなたは（とすべきである）（ドットで）セレクタを使用することができます別の方法は、もちろんあり。ここに正確な.delete_productを与えるコードがあります。

$("#products").on("click", ".delete_product", function (ev) { 
    var $t = $(ev.target); 
    $t = $t.is('.delete_product') ? $t : $t.parents('.delete_product'); 
    console.log($t.hasClass("delete_product")); 
});

出典

2016-09-05 19:05:39

これは 'a'リンクが' Hellothere 'のような子要素を持つときに失敗します。これらの子要素の1つにクリックがあると、ターゲットは 'a'要素にはなりませんが、依然として委譲されたイベントハンドラの目的です。 – trincot

これは、ターゲットが.delete_productかどうかを確認する理由です。そうでなければ、それはそのクラスの親です。これは、子/親がクラスdelete_productを持たないと仮定して、それを子証明にします。理にかなっている？ ** $ t = $ t.is（ '。delete_product'）？ $ t：$ t.parents（ '。delete_product'）; **この行は、それを子の証明にします。 :) –

あなたは '' if''と '' yes''がその条件で動作すると付け加えましたが、jQueryは既にそのタスクを実行しています。 – trincot

委任されたイベントでJqueryが要素をクリック

答えて

関連する問題