変更ボタンクラスを動的に

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デベロッパーツールは、クラスが削除されたことを示します。 ボタンをもう一度クリックすると、jqueryコードの同じビットが、そのクラスを指しているクラスであってもdosntが存在する場合でも実行されます。

どうしたらいいのですか？

EDIT :: Ooopssがドットを忘れました。私は私のソリューションにドットを持っています。これはデモンストレーションの目的にすぎません。ドットを追加しました。

Answer 1

1）クラス名の前に.を追加し、それは$(".changeMe")なり、$(".secondClass")

2）を使用し$(document).on("click")イベント

試してみてください。

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

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

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()を使用してください。

$(".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!") 
 
    }); 
 
});

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

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!"); 
    } 
});