このボタンがあります。ネストされた2つの要素に同じクラス名がある場合、clickリスナーが2回起動することに気づきました。クリックしたときに、どうすればこれを修正できますか？
$('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>同じクラスの親/子があるため、伝播を防ぐ必要があるため、 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>他のオプションは使用することです e.currentTarget()
$('body').on('click', '.remove', e => $(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>そしてここにJSの純粋なソリューションがあります
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" />
<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>注：を持っbuttonているtype='button'ので、使用する必要はありませんe.preventDefault()
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加