javascript - JQuery ajax 在具有 2 个单击事件的 2 个按钮类之间更改，但不能更改按钮的值

Question

<分区>

Answer 1

$(".close") 将在 DOM 中找到元素 .close 并绑定(bind)事件。当您动态更改元素的类时，当 jQuery 尝试查找元素时，元素不在 DOM 中。

Use Event Delegation, Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future. Use .on() instead of 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");
    }
  })
});