jQuery, как выполнить событие только на внутреннем элементе
Есть ли существует способ только позволить внутреннему элементу a listitem что-то?
У меня есть элементы списка, которые могут содержать a теги с определенным классом.
Внутреннее a теги связываются с живым обработчиком события Click. Сами элементы списка имеют также обработчика события Click.
Что-то вроде этого
<li>some text<a class="someClassName">some text</a></li>
с обработчиком для a теги
$('#somelist li a').live("click", function(e)
и это - то, как событие для объекта лития добавляется
$(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 ");
2 ответа
Метод live в jQuery работает через делегирование событий, то есть перехват всех всплывающих событий из отдельных элементов в общий предок (в вашем случае это документ ).
Остановка распространения / восходящей цепочки события щелчка происходит в элементе-обработчике (который является общим предком, а не в самом элементе) и существует намного выше li , которого вы пытаетесь избежать.
Итак, к моменту вызова метода stopPropagation мы уже прошли вниз по dom и передали элемент li .
По сути, это установка знака остановки в 200 футах после перекрестка.
Таким образом, вам нужно либо использовать bind и stopPropagation , либо найти другое решение.
Вот пример того, о чем я говорю: http://jsbin.com/ibuxo (проверьте консоль)
вы можете увидеть код или отредактировать его на http://jsbin.com/ibuxo/edit
Моим предложенным решением этой проблемы было бы использование bind вместо live .
Это потребует от вас немного дополнительной работы, но это не так уж плохо.
Вы, вероятно, используете live , потому что вы добавляете новые элементы и хотите, чтобы они обладали той же функциональностью. Вы должны сделать это, привязав их при вводе на страницу. Вот пример
$(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()
);
});