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

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

$('.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(){..})时，类first_section的元素不在DOM中，因此没有附加任何内容。

如果您将hasClass( ".first_section")更改为hasClass( "first_section")，则第二个代码段将有效 - 无需点。

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

我之前添加一个类时，jQuery Click事件不起作用

1 个答案: