jQuery 为具有相同 class 名称的两个嵌套元素触发两次

Question

I have this button. I just noticed, if I have the same class name on two nested elements, the click listener will fire twice. When I click, how can I fix this?

 $('body').on('click', '.remove', function(e) { e.preventDefault(); if ($(e.target).hasClass('remove')) { console.log('test'); //executed twice here } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button type="button" class="btn remove "><i class="fas fa-trash remove">Remove icon</i></button>

Answer 1

You need to prevent propagation because you have parent/child with same class, so use e.stopPropagation()

 $('body').on('click', '.remove', e => { e.stopPropagation() $(e.currentTarget).hasClass('remove')? console.log('test'): '' })

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button type="button" class="btn remove"><i class="fas fa-trash remove">remove</i></button>

---

And here is JS pure solution

 document.addEventListener('click', e => e.target.classList.contains('remove')? console.log('test'): '')

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet" /> <button type="button" class="btn remove"><i class="fas fa-trash remove">remove</i></button>

Note: because you have button with a type='button' , there is no need to use e.preventDefault()