jQuery 当我在前面添加 Class 时，点击事件不起作用

Question

我发现了这个问题，但解决方案对我不起作用： jQuery click event not working after adding class

我有这个代码：

$('.play_button i').click(function() {
    $('.content').css( "background-position-x", "-800px" );
    $(this).addClass('first_section');
});

$( '.play_button i.first_section' ).on( "click", function() {
    $('.content').css( "background-position-x", "-1500px" );
});

为什么 .on 功能不起作用？

HTML结构：

<div class="content">
    <div class="play_button"><i class="fa fa-play-circle-o"></i></div>
</div>

我也尝试让它与 if 功能一起使用，但它也不起作用。

$('.play_button').on("click", "i", function() {

    if ( $( '.play_button i' ).hasClass( ".first_section") ) {
        $('.content').css( "background-position-x", "-1500px" );}
    else {
        $('.content').css( "background-position-x", "-800px" );
        $(this).addClass('first_section');
    }
});

Answer 1

我认为你可以重写你的代码，所以你只需检查同一函数内的 class：

$('.play_button i').click(function(){

    if ( !$(this).hasClass('first_section') ) {
        $('.content').css( "background-position-x", "-800px" );
        $(this).addClass('first_section');
    } else {
        $('.content').css( "background-position-x", "-1500px" );
    }

});

您的第一个代码段不起作用，因为当您尝试附加事件处理程序时 $( '.play_button i.first_section' ).on( "click", function(){..}) 具有 class first_section 的元素不在 DOM 中，所以什么都没有已附上。

如果您将 hasClass( ".first_section") 更正为 hasClass( "first_section")，您的第二个代码段将起作用 - 不需要点。

通常，将事件附加到当前不在 DOM 中的元素的最佳方法是使用 $("container").on("click","element",function() { ... });，其中 element 是元素的 jQuery 选择器想要绑定到； container 是将保存新创建的元素的元素（例如 div），当您调用此 on 方法时，该元素已存在于页面上。或者，如果您没有任何特殊容器，则直接使用 $(document)。

jQuery 当我在前面添加 Class 时，点击事件不起作用

jQuery Click event doesn't work when I add a Class before

javascript

jquery

addclass