I have sent this exercise in classes and I have about 3 days without being able to stop this spread, I have tried to stop the spread everywhere and without any result, the idea is that when you click on the heart, or the comment on each image, the parent link (.meals_link) of all the elements is triggered ... hopefully they can guide me, I have tried with almost all the selectors that came to me '
$(function(){
$('button').on('click', 'i.fa-heart', function(event){
event.stopPropagation();
event.stopImmediatePropagation();
$('.social__like').toggleClass('social__like--clicked');
});
$('button').on('click','i.fa-comment-alt', function(event){
event.stopPropagation();
event.stopImmediatePropagation();
alert($(this).parent().parent().parent().parent().attr('href'));
});
$('ul.social').on('click','li.social__element', function(event){
event.stopPropagation();
})
$('a').on('click','ul.social', function(event){
event.stopPropagation();
})
$('li.meals__meal').on('click','a', function(event){
event.stopPropagation();
})
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="meals__meal">
<a href="../_assets/images/meal/04.jpg" class="meals__link">
<img src="../_assets/images/meal/04.jpg" alt="Comida 01" class="meals__img">
<ul class="social">
<li class="social__element"><button class="social__btn social__link" href="#"><i class="fas fa-comment-alt"></i></button></li>
<li class="social__element"><button class="social__btn social__like" href="#"><i class="fas fa-heart"></i></button></li>
</ul>
</a>
</li>
<li class="meals__meal">
<a href="../_assets/images/meal/05.jpg" class="meals__link">
<img src="../_assets/images/meal/05.jpg" alt="Comida 01" class="meals__img">
<ul class="social">
<li class="social__element"><button class="social__btn social__link" href="#"><i class="fas fa-comment-alt"></i></button></li>
<li class="social__element"><button class="social__btn social__like" href="#"><i class="fas fa-heart"></i></button></li>
</ul>
</a>
</li>
<li class="meals__meal">
<a href="../_assets/images/meal/06.jpg" class="meals__link">
<img src="../_assets/images/meal/06.jpg" alt="Comida 01" class="meals__img">
<ul class="social">
<li class="social__element"><button class="social__btn social__link" href="#"><i class="fas fa-comment-alt"></i></button></li>
<li class="social__element"><button class="social__btn social__like" href="#"><i class="fas fa-heart"></i></button></li>
</ul>
</a>
</li>
<li class="meals__meal">
<a href="../_assets/images/meal/07.jpg" class="meals__link">
<img src="../_assets/images/meal/07.jpg" alt="Comida 01" class="meals__img">
<ul class="social">
<li class="social__element"><button class="social__btn social__link" href="#"><i class="fas fa-comment-alt"></i></button></li>
<li class="social__element"><button class="social__btn social__like" href="#"><i class="fas fa-heart"></i></button></li>
</ul>
</a>
</li>
<li class="meals__meal">
<a href="../_assets/images/meal/08.jpg" class="meals__link">
<img src="../_assets/images/meal/08.jpg" alt="Comida 01" class="meals__img">
<ul class="social">
<li class="social__element"><button class="social__btn social__link" href="#"><i class="fas fa-comment-alt"></i></button></li>
<li class="social__element"><button class="social__btn social__like" href="#"><i class="fas fa-heart"></i></button></li>
</ul>
</a>
</li>
<li class="meals__meal">
<a href="../_assets/images/meal/09.jpg" class="meals__link">
<img src="../_assets/images/meal/09.jpg" alt="Comida 01" class="meals__img">
<ul class="social">
<li class="social__element"><button class="social__btn social__link" href="#"><i class="fas fa-comment-alt"></i></button></li>
<li class="social__element"><button class="social__btn social__like" href="#"><i class="fas fa-heart"></i></button></li>
</ul>
</a>
</li>
<li class="meals__meal">
<a href="../_assets/images/meal/10.jpg" class="meals__link">
<img src="../_assets/images/meal/10.jpg" alt="Comida 01" class="meals__img">
<ul class="social">
<li class="social__element"><button class="social__btn social__link" href="#"><i class="fas fa-comment-alt"></i></button></li>
<li class="social__element"><button class="social__btn social__like" href="#"><i class="fas fa-heart"></i></button></li>
</ul>
</a>
</li>