Распространение событий JQuery click
У меня есть таблица с событиями щелчка, привязанными к ее строкам (<tr>
). Внутри этих строк есть элементы <a>
со своими назначенными событиями кликов.
Проблема в том, что когда я нажимаю элемент <a>
, он также запускает событие click из родительского <tr>
. Я не хочу этого поведения; Я просто хочу запустить событие <a>
click.
код:
// 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!"); });
Всякий раз, когда вы нажимаете на якорь, он вызывает событие из родительской строки. Любые идеи?
Ответы
Ответ 1
Вам нужно прекратить пузырьки событий. В jQuery вы можете сделать это с помощью
e.stopPropagation();
в событии onclick тега привязки.
$("a").live("click",function(e){alert("clicked!");e.stopPropagation();});
Edit
Смотрите это сообщение
jquery Event.stopPropagation(), похоже, не работает
Ответ 2
Я использовал бы bind
вместо live
для <tr>
и <a>
, а следующий код
$("a").bind("click", function(e){ alert("clicked!"); e.stopPropagation() });
для <a>
.
Все <a href>
будут работать как ожидалось, а <tr>
код обработчика событий не будет выполнен после нажатия <a>
.
Работает во всех современных браузерах.