jQuery: nhấn yếu tố lồng nhau

Question

Tôi đã sau đánh dấu

<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> 

và kịch bản sau đây

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

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

---

Khi tôi nhấp vào hình ảnh, nó cũng gây nên click ListItem. Tôi hiểu điều này là bởi vì hình ảnh bên trong ListItem. nhưng tôi muốn nhấp chuột của ListItem không được kích hoạt khi hình ảnh được nhấp. Có cách nào để làm điều đó không?

Answer 1

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

Answer 2

Bạn cần phải sử dụng event.stopPropagation() để ngăn chặn sự kiện từ bọt lên cây DOM.

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

Sự kiện bạn đã ràng buộc với biểu tượng xóa đang kích hoạt sự kiện ràng buộc cha mẹ với ListItem, vì vậy bạn cần dừng tuyên truyền cho sự kiện chính khi con là nguồn sự kiện.

Answer 3

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

Answer 4

Sử dụng .Một(), theo chỉ dẫn trong tài liệu JQuery.

Answer 5

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

Phương pháp này là người duy nhất tôi tìm thấy để làm việc với các yếu tố lồng nhau, đặc biệt là những tạo ra bởi một thư viện như PivotTable (https://github.com/nicolaskruchten/pivottable)