AJAX按钮切换只能在页面刷新之前生效一次

问题是由于按钮的状态没有正确更新而导致的。为了解决这个问题，可以使用jQuery的on()方法。我们创建一个父元素来包含按钮，然后在父元素上使用on()方法来响应按钮的点击事件。这样，无论按钮的状态如何变化，我们都可以正确地更新它。

以下是代码示例：

<div id="button-container">
  <button class="toggle-button">Toggle</button>
</div>

<script>
  $(document).ready(function() {
    var buttonContainer = $('#button-container');
    var toggleButton = buttonContainer.find('.toggle-button');

    buttonContainer.on('click', '.toggle-button', function() {
      $.ajax({
        // Your AJAX request
        success: function(data) {
          toggleButton.text(data.newButtonText); // Update button text on success
        }
      });
    });
  });
</script>

在上面的示例中，我们将按钮包装在一个父元素中，并使用on()方法在父元素上侦听按钮的点击事件。这将确保我们可以正确更新按钮状态，即使它的文字内容发生了改变。此外，我们还使用了jQuery的find()方法来查找按钮。这个方法只会在父元素内查找元素，而不是在整个文档中查找元素，这样可以增加效率并减少潜在的bug。