jQuery .click 不触发后代选择器

jQuery .click not firing for descendant selector

本文关键字：后代 选择器 click jQuery      更新时间：2023-09-26

在这里感觉很愚蠢。.click()函数没有触发，我不知道为什么不触发。代码真的和下面一样简单。注意：.selector-book div中的span由前一个函数动态加载。一如既往，任何帮助都值得赞赏。

.HTML：

<div id="selector-book" class="selector-book">
    <span class="book-name" data-book-number="0"></span>
    <span class="book-name" data-book-number="1"></span>
    <span class="book-name" data-book-number="2"></span>
    <span class="book-name" data-book-number="3"></span>
    ...
</div>

.JS：

$(document).ready(function() {
    $('.selector-book span').click(function() {
        console.log('test');
        $('.selector-chapter').html('');
        var p = $(this).data('book-number');
        for (var i = 0; i < myBible[p][2]; i++) {
            $('.selector-chapter').append('<span>' + i + '</span>');
        }
    });
});

由于span是动态加载的，因此在加载脚本时，DOM 中不存在元素，这就是为什么它不会将事件与元素绑定的原因。

对于动态加载的元素，您必须使用委托，如波纹管

$('.selector-book').on('click','span',function() {..});

$(document).ready(function() {
    $('.selector-book').on('click', 'span', function() {
        console.log('test');
        $('.selector-chapter').html('');
        var p = $(this).data('book-number');
        for (var i = 0; i < myBible[p][2]; i++) {
            $('.selector-chapter').append('<span>' + i + '</span>');
        }
    });
});

对动态生成的元素使用事件委托方法。

相关文章：