Это правда, что говорит Фонг, и это работает. Однако теперь представьте, что у вас в родительском элементе много дочерних элементов, соответствующих этому селектору. Используя что-то вроде ниже, вы бы добавили прослушиватель событий к каждому из этих элементов.
$(".info, .item-image").on("click", function(){
console.log("Trigger");
});
Хотя при первом подходе вы уже были очень близки к тому, чтобы иметь только одного слушателя, независимо от того, сколько дочерних элементов находится в родительский.
Рассмотрим следующий пример:
<ul class='parent'>
<li>No</li>
<li>Click</li>
<li>Event</li>
</ul>
$(".parent").on("click",function(e) {
if(!e.target.classList.contains('parent')) {
return console.log('no event')
}
console.log('fire event')
});
Это называется делегированием событий, и вы в значительной степени уже это делаете. Здесь я проверяю, действительно ли элемент, на который я нажимаю, действительно родительского класса, только тогда я запускаю свое событие.
Конечно, вы можете выполнять все виды проверок, например, только элементы <li> .
$(".parent").on("click", (e) => e.target.tagName == 'LI' && console.log('fire event'))
Вот этот пример https://codepen.io/bluebrown/pen/xxGVgYd?editors=1111
Я бы порекомендовал выполнить веб-поиск для делегирования событий и всплытия событий.