Truy vấn sự kiện nhấp chuột Jquery

Question

Tôi có một bảng có sự kiện nhấp được ràng buộc với các hàng của nó (<tr>). Có <a> yếu tố bên trong các hàng đó với sự kiện nhấp chuột được chỉ định.

Vấn đề là khi tôi nhấp vào thành phần <a>, nó cũng kích hoạt sự kiện nhấp chuột từ phụ huynh <tr>. Tôi không muốn hành vi này; Tôi chỉ muốn kích hoạt sự kiện nhấp chuột <a>.

Code:

// Event row TR 

$("tr:not(:first)").click(function() { 
    $(".window, .backFundo, .close").remove(); 

    var position = $(this).offset().top; 
    position = position < 0 ? 20 : position; 

    $("body").append($("<div></div>").addClass("backFundo")); 
    $("body").append($("<div></div>").addClass("window") 
     .html("<span class=close><img src=Images/close.png id=fechar /></span>") 
     .append("<span class=titulo>O que deseja fazer?</span>" 
       +"<span class=crud><a href=# id=edit>Editar</a></span>" 
       +"<span class=crud><a href=# id=delete codigo=" 
       + $(this).children("td:first").html() 
       + ">Excluir</a></span>") 
     .css({top:"20px"}) 
     .fadeIn("slow")); 

    $(document).scrollTop(0); 
}); 

// <A> Element event 

$("a").live("click",function() { alert("clicked!"); }); 

Bất cứ khi nào bạn nhấp vào neo nó cháy sự kiện từ nó hàng mẹ. Bất kỳ ý tưởng?

Answer 1

Bạn phải ngừng bong bóng sự kiện. Trong jQuery, bạn có thể thực hiện điều này bằng cách

e.stopPropagation(); 

trong sự kiện onclick của thẻ neo.

$("a").live("click",function(e){alert("clicked!");e.stopPropagation();}); 

Sửa

Xem bài đăng này

jquery Event.stopPropagation() seems not to work

Answer 2

Tôi sẽ sử dụng bind thay vì live cho cả <tr> và <a> và đoạn mã sau

$("a").bind("click", function(e){ alert("clicked!"); e.stopPropagation() });

cho <a>.

Tất cả <a href> sẽ hoạt động như mong đợi và <tr> mã xử lý sự kiện sẽ không thực thi sau khi nhấp vào <a>.

Hoạt động trong tất cả các trình duyệt hiện đại.