Родительский и дочерний метод .click ()
У меня ниже HTML-код.
<li class = "list-group-item font-weight-bold">
Mouse
<img src = "images/delete.png" class = "delete"/>
</li>
У меня есть 2 разных метода jQuery .click(). Один для <li></li>, другой для <img/>.
Теперь, когда я нажимаю на <img/>, то также запускается метод <li></li>.click().
Вот код jQuery.
$('.list-group li').click(function () {
//some code here
});
$('.delete').click(function () {
//some code here
});
Как я могу хранить их отдельно, чтобы каждый метод .click() работал индивидуально?
Вы можете сослаться на stackoverflow.com/questions/13966734/…
Ответы 3
Вы можете попробовать использовать такой способ:
var li_onclick = function (li) {
console.info(li);
};
var img_onclick = function (img) {
console.info(img);
};
$(document).on('click', function (e) {
if (e.target.tagName === 'LI') {
li_onclick(e.target);
} else {
img_onclick(e.target);
}
});<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class = "list-group-item font-weight-bold">
Mouse
<img src = "images/delete.png" class = "delete"/>
</li>Используя e.target, чтобы проверить, какой элемент был нажат. Затем проверка tagName для классификации тега li и тега img.
Предположим, у вас есть разные атрибуты id для обоих и одного и того же класса .click.
<li class = "list-group-item font-weight-bold click" id = "this_is_li">
Mouse
<img src = "images/delete.png" class = "delete click" id = "this_is_img"/>
</li>
Когда вы нажимаете на элемент ниже, скрипт сообщит вам об этом элементе id, чтобы вы могли его использовать.
$('.click').on('click', function(){
var ID = $(this).attr('id');
if (ID === 'this_is_li'){
alert('you clicked on li #' +ID);
}
if (ID === 'this_is_img'){
alert('you clicked on img #' +ID);
}
});
Используйте метод event.stopPropagation().
Этот метод предотвращает всплытие события в дереве DOM, предотвращая получение уведомления о событии родительскими обработчиками. Документация по jQuery API
$('li.list-group-item').on('click',function(){
console.info('LI Clicked')
})
$('img.delete').on('click',function(event){
event.stopPropagation()
console.info('IMG Clicked')
})<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class = "list-group-item font-weight-bold">
Mouse
<img src = "images/delete.png" class = "delete"/>
</li>
поделитесь своим кодом jquery