javascript - jQuery:ネストされた要素をクリックする

Question

次のマークアップがあります

<ol>
    <li class="ListItem">
        <span class="sub">@qItem.CategoryText</span>
        <input type="image" src="http://icons.iconarchive.com/icons/tatice/just-bins/256/bin-red-full-icon.png" width="30" class="deleteIcon" name="QuestionId" value="@qItem.Id" />
    </li>
</ol>

そして次のスクリプト

$(".ListItem").click(function(){
doActionA();
});

$(".deleteIcon").click(function(){
doActionB();
});

---

画像をクリックすると、ListItem のクリックもトリガーされます。これは、画像が ListItem 内にあるためだと理解しています。しかし、画像がクリックされたときにListItemのクリックが発生しないようにします。それを行う方法はありますか？

Answer 1

$(".deleteIcon").click(function(e){
    doActionB();
    e.stopPropagation();
});

Answer 2

イベントがDOMツリーをバブリングしないようにするには、event.stopPropagation()を使用する必要があります。

$(".deleteIcon").click(function(event){
    event.stopPropagation()
    doActionA();    
});

削除アイコンでバインドしたイベントは、ListItem でバインドされた親イベントを起動しているため、子がイベントのソースである場合は親イベントの伝播を停止する必要があります。

Answer 3

$(document).on("click", ".deleteIcon", function() {
  doActionB();
});

この方法は、ネストされた要素、特に Pivottable ( https://github.com/nicolaskruchten/pivottable )などのライブラリによって生成された要素で機能することがわかった唯一の方法です。

Answer 4

JQuery ドキュメントの指示に従って、.one() を使用します。

Answer 5

$(".deleteIcon").click(function(){
    doActionA();
    return false;  
});