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 के अंदर है। लेकिन मैं चाहता हूं कि सूची इटिम के क्लिक को छवि पर क्लिक होने पर निकाल दिया जाए। क्या ऐसा करने का कोई तरीका है?

Answer 1

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

Answer 2

आप event.stopPropagation() उपयोग करने के लिए डोम पेड़ खलबली मचाने वाले से घटना को रोकता है की जरूरत है।

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

घटना आप हटाएं आइकन के साथ आबद्ध, ListItem साथ बाध्यकारी माता पिता घटना फायरिंग ताकि आप माता-पिता घटना के लिए प्रचार को रोकने के लिए जब बच्चे घटना का स्रोत है की जरूरत है।

Answer 3

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

Answer 4

उपयोग .one(), JQuery दस्तावेज में निर्देशित के रूप में।

Answer 5

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

इस विधि केवल एक ही मैं नेस्टेड तत्वों, विशेष रूप से इस तरह के PivotTable (https://github.com/nicolaskruchten/pivottable)