Ändern der Tasten Klassen arbeiten dynamisch nicht

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

Dies ist im Grunde, was mein Code aussieht.

Ich klicke auf den Knopf. Chrome-Entwicklertools zeigen, dass die Klasse entfernt wurde. Ich klicke erneut auf die Schaltfläche, und das gleiche bisschen jQuery-Code läuft, auch wenn die Klasse ihre Pointierung zu dosnt existiert.

Wie kann ich das verhindern?

EDIT :: Ooopss hat den Punkt vergessen. Ich habe den Punkt in meiner Lösung. Dies dient nur zu Demonstrationszwecken. Neuer Punkt

Answer 1

1) In . vor Klassennamen, so wird es $(".changeMe") und $(".secondClass")

2) Verwenden Sie sein $(document).on("click") Ereignis

Versuchen:

$(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

Dieser Code sollte Arbeit

$("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

Versuchen Sie dies bei einem Klick auf .secondClass. Sie müssen die Ereignisse dynamisch binden.

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

Answer 4

Sie müssen Ereignisdelegierung verwenden, da Sie Klassen manuell ändern. Auch . wird für die Auswahl von Klassennamen benötigt.

Edit: Statt Ereignis Delegation, können Sie die folgende, binden das Ereignis an die zweite Klasse verwenden, nachdem die Klasse hinzugefügt wird.

Verwenden Sie one() für die Bindung, um nur einmal zu arbeiten.

$(".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

Versuchen Sie Folgendes:

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