jQuery cách chỉ thực hiện sự kiện trên phần tử bên trong

Question

Có cách nào chỉ để yếu tố bên trong của một số listitem làm điều gì đó không?

Tôi có các yếu tố danh sách có thể chứa a thẻ với một lớp nhất định.

Thẻ bên trong a bị ràng buộc với trình xử lý sự kiện nhấp chuột trực tiếp. Bản thân các mục danh sách cũng có trình xử lý sự kiện nhấp chuột.

Something như thế này

<li>some text<a class="someClassName">some text</a></li> 

với handler cho a thẻ

$('#somelist li a').live("click", function(e) 

và đây là cách sự kiện cho mặt hàng li được thêm

$(markers).each(function(i,marker){ 
    $("<li />") 
    .html("Locatie "+'<a class="ol id"><strong>'+ids[i]+'</strong></a>') 
    .click(function(e){ 
      showLocation(marker, i); 
    }) 
    .appendTo("#somelist "); 

Answer 1

Phương thức live trong jQuery hoạt động thông qua ủy quyền sự kiện, đó là hành động bắt tất cả các sự kiện sôi nổi từ các phần tử riêng lẻ lên tổ tiên chung (trong trường hợp của bạn là document).

Dừng sự truyền/bong bóng của sự kiện nhấp xảy ra trên phần tử xử lý (là tổ tiên chung, không phải trên chính phần tử) và tồn tại cách trên li mà bạn đang cố tránh.

Vì vậy, vào thời điểm phương thức stopPropagation được gọi, chúng tôi đã đi ngang qua mái vòm và chuyển phần tử li.

Về bản chất, việc đặt ký hiệu dừng 200ft sau khi giao lộ.

Vì vậy, bạn cần phải sử dụng bind và stopPropagation hoặc tìm giải pháp khác.

Dưới đây là một ví dụ về những gì tôi đang nói về: http://jsbin.com/ibuxo (đánh dấu vào giao diện điều khiển)

bạn sẽ nhìn thấy mã hoặc chỉnh sửa nó ở http://jsbin.com/ibuxo/edit

giải pháp đề nghị của tôi cho vấn đề này sẽ được sử dụng bind thay vì live.

Điều này yêu cầu bạn phải làm thêm một chút, nhưng nó không quá tệ.

Có thể bạn đang sử dụng live vì bạn đang thêm các phần tử mới và bạn muốn chúng có cùng chức năng. Bạn nên làm điều này bằng cách ràng buộc chúng khi bạn nhập chúng vào trang. Dưới đây là một ví dụ

$(function(){ 
    var myAnchorHandler = function(e){ 
    alert('clicked!'); 
    e.stopPropagation(); 
    return false; 
    }; 

    // initial bind 
    $('#somelist li a').click(myAnchorHandler); 

    // code where you input more li elements to the list with links 
    $('#somelist').append(
    // bind your function to the element now, and then append it 
    $('<li><a>hi</a></li>').find('a').click(myAnchorHandler).parent() 
); 
}); 

Answer 2

Có handler cho các thẻ <a> trả về false.

Answer 3

Giải pháp từ Tác giả:

tôi đã thêm tất cả các thẻ một như trên, vì vậy không mixup với live nữa.

$(markers).each(function(i,marker){ 
    listitem = $("<li />") 
    .html("Location ") 
    .click(function(e){ 
     showLocation(marker, i); 
    }) 
    .appendTo("#somelist"); 
    $("<a />") 
    .html("<strong>"+ids[i]+"</strong>") 
    .addClass('ol id') 
    .click(function(){ 
     $('#ginfo').show(); 
     return false; 
    }) 
    .appendTo(listitem); 

Dưới đây là một trang thú vị để giải thích sự kiện bọt: How to stop event bubbling with jquery live?