JQuery Ajax-Wechsel zwischen 2-Taste Klasse mit 2 Ereignis klicken, kann aber nicht den Wert der Taste

Question

ich eine Taste ändern <button class="open" id="1">Open</button>

, wenn ich auf den Button klicken wollte ich den Knopf in <button class="close" id="1">Close</button>

ich ändern ein Skript gemacht für sie

Hier ist das Skript:

$(".open").click(function(){ 
    $ths=$(this); 
    var id=$(this).val(); 
    $.ajax({ 
     type:"POST", 
     url:"someurl", 
     dataType: "html", 
     data:id, 
     success:function(res){ 
      $thd.html("Open"); 
      $ths.toggleClass("open close"); 
     } 
    }) 
}); 

$(".close").click(function(){ 
    $ths=$(this); 
    var id=$ths.val(); 
    $.ajax({ 
     type:"POST", 
     url:"someurl", 
     dataType: "html", 
     data:id, 
     success:function(res){ 
      $ths.html("Close"); 
      $ths.toggleClass("close open"); 
     } 
    }) 
}); 

Wenn ich es versuchen, auf den ersten klicken, um es den 01 geändertin <button class="close" id="1">Close</button>

Auf zweiter Klick hoffe, dass ich es auf diese <button class="open" id="1">Open</button>

geändert zurück haben aber nicht verändert, was ich will. Es änderte sich dies <button class="open" id="1">Close</button> Es änderte nur die Klasse, den geschlossenen Text nicht zu öffnen.

Kann jemand erklären, warum es nicht funktioniert? und auch, wie man diesen Knopf ändert, um Klasse und seinen Text zu ändern, oh yeah auch ist dieses Problem hat einen Namen ?.

Thx im Voraus für die Beantwortung!

Answer 1

$(".close") finden Element .close in DOM und werden Ereignisse binden. Da Sie die Klasse des Elements dynamisch ändern, ist das Element DOM nicht vorhanden, wenn jQuery versucht, es zu finden.

Verwenden Event Delegation, Ereignis Delegation ermöglicht es uns, einen einzelnen Ereignis-Listener zu befestigen, an ein übergeordnetes Element, das eine Auswahl für alle Nachkommen übereinstimmt, ob diese Nachkommen jetzt existieren abfeuern oder in Zukunft hinzugefügt. Verwenden .on() statt click

$(document).on("click", ".open", function() { 
 
    $ths = $(this); 
 
    var id = $(this).val(); 
 
    $.ajax({ 
 
    type: "POST", 
 
    url: "someurl", 
 
    dataType: "html", 
 
    data: id, 
 
    success: function(res) { 
 
     $ths.html("Open"); //You had a typo here! 
 
     $ths.toggleClass("open close"); 
 
    } 
 
    }) 
 
}); 
 

 
$(document).on("click", ".close", function() { 
 
    $ths = $(this); 
 
    var id = $ths.val(); 
 
    $.ajax({ 
 
    type: "POST", 
 
    url: "someurl", 
 
    dataType: "html", 
 
    data: id, 
 
    success: function(res) { 
 
     $ths.html("Close"); 
 
     $ths.toggleClass("close open"); 
 
    } 
 
    }) 
 
});