Question

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

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>');
        }
    });
});

Answer 1

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

对于动态加载的元素，您必须使用像bellow

这样的委托

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

Answer 2

$(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>');
        }
    });
});

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

jQuery .click不为后代选择器触发

2 个答案: