JQuery的AJAX改變與2點擊事件，但不能更改按鈕

Question

我有一個按鈕的值<button class="open" id="1">Open</button>

，如果我按一下按鈕，我想按鈕變成<button class="close" id="1">Close</button>

我做了一些腳本，它

下面是腳本：

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

當我嘗試它，首先點擊它改變了<button class="open" id="1">Open</button>到<button class="close" id="1">Close</button>

在第二次點擊我希望它改回這個<button class="open" id="1">Open</button>

但它並沒有改變我想要的東西。它改爲這個 <button class="open" id="1">Close</button>它只改變了類，關閉文本打開不了。

有人可以解釋爲什麼它不工作？以及如何使該按鈕改變類和它的文本，哦耶也是這個問題有一個名字？

Thx提前回答！

Answer 1

$(".close")將在DOM中找到元素.close並將綁定事件。當您動態更改元素的類別時，當jQuery嘗試查找它時，元素不在DOM中。

使用Event Delegation，事件代表團允許我們附加一個單一的事件偵聽器，以父元素，將火了選擇匹配的所有後代，無論是現在存在的或將來添加這些後代。使用.on()而不是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"); 
 
    } 
 
    }) 
 
});