Question

<button class="changeMe"> Click Me </button>

$(".changeMe").on("click", function(){
    console.log("I should only work the first time!")
    $("changeMe").addClass("secondClass").removeClass("changeMe");
});

$(".secondClass").on("click", function(){
    console.log("Now I should Work!")
});

这基本上就是我的代码。

我点击按钮。 Chrome开发人员工具显示该类已被删除。我再次单击该按钮，即使您的类指向dosnt，也会运行相同的jquery代码。

如何阻止这种情况发生。

编辑:: Ooopss忘了点。我的解决方案中有点。这仅用于演示目的。添加了点。

Answer 1

1）在课程名称前添加.，这样就会$(".changeMe")和$(".secondClass")

2）使用$(document).on("click")事件

尝试：

＆＃13;

$(document).on("click",".changeMe", function(){
    console.log("I should only work the first time!")
    $(".changeMe").addClass("secondClass")
    $(".changeMe").removeClass("changeMe");
});

$(document).on("click",".secondClass", function(){
    console.log("Now I should Work!")
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button class="changeMe"> Click Me </button>

＆＃13;

Answer 2

此代码应该可以使用

$("body").on("click", '.changeMe', function(){
    console.log("I should only work the first time!")
    $(".changeMe").addClass("secondClass").removeClass("changeMe");
});

$("body").on("click", '.secondClass', function(){
    console.log("Now I should Work!")
});

Answer 3

点击.secondClass时尝试此操作。您必须动态绑定事件。

$(document).on("click",".secondClass", function(){
    console.log("Now I should Work!")
});

Answer 4

您需要使用事件委派，因为您要手动更改类。选择类名也需要.。

修改，而不是事件委派，您可以使用以下内容，在添加类后将事件绑定到第二个类。

使用 one() 进行绑定只能使用一次。

＆＃13;

$(".changeMe").one("click", function(e){
    console.log("I should only work the first time!")
    $(".changeMe").addClass("secondClass").removeClass("changeMe");
    $(".secondClass").on("click", function(){
        console.log("Now I should Work!")
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="changeMe"> Click Me </button>

＆＃13;

Answer 5

尝试以下方法：

 $(".changeMe").on("click", function(e){

    if($(e.target).is('.changeMe')) {
    console.log("I should only work the first time!")
    $(".changeMe").removeClass("changeMe").addClass("secondClass");
    } else {
    console.log("Now I should Work!");
    }
});

动态更改按钮类不起作用

5 个答案: