3

私はこのhtmlを持っています:

 <ul class='loc-list'>  
     <li id="where_7" class="cont-list">North America
         <ul>
            <li id="contry_114" class="contry-list">canada</li>
            <li id="contry_115" class="contry-list">mexico</li>
            <li id="contry_117" class="contry-list">united states</li>
         </ul>
     </li>
 </ul>

これで、リストの onclick の 2 つの jquery 関数を次のように記述しました。

1番目:

$(".cont-list").on("click", function(event){
     alert("clicked on continent's list"); // working fine
 };

2位：

$(".contry-list").on("click", function(event){
     alert("clicked on country's list");  // not working!
 };

ここでcont-listをクリックすると、必要に応じて呼び出されますが、2番目の関数では呼び出されず、代わりに1番目の関数が呼び出されます!

それは内部リストであるためですか？もしそうなら、これをどのように処理して、そのリストをクリックしたときにのみ呼び出されるようにしますか?

デモはこちら

前もって感謝します！

4

4 に答える 4

8

これは、イベントがバブルアップするため、オブジェクトstopPropagationのメソッドを使用できるためです。event

$(".contry-list").on("click", function(event){
     event.stopPropagation();
     alert("clicked on country's list");  
});

要素を動的に生成する場合はli、イベントを委任する必要があります。

$(document).on('click', '.coutry-list', function(){
   console.log('li element is clicked');
})
于 2013-02-28T14:00:49.530 に答える
1 
$(".contry-list").on("click", function(event){
     event.stopPropagation();
     alert("clicked on country's list");
});
于 2013-02-28T14:00:35.390 に答える
1

event.stopPropagation()を使用する必要があります

$(".contry-list").on("click", function(e){
     e.stopPropagation();
     alert("clicked on country's list");
});

デモはこちら

于 2013-02-28T14:01:51.863 に答える
0

jQuery での修正は次のようになります。

$(".contry-list").on("click", function(event){
     alert("clicked on country's list");  // not working!
    return false; 
});

しかし、epascarello が指摘しているように、それを理解するには、DOM イベントのバブリング (およびキャプチャー) について学ぶ必要があります。

于 2013-02-28T14:07:19.740 に答える