Question

我试图弄清楚如何使用AJAX改变按钮的行为。

单击该按钮时，表示最近创建的user已确认订单。 AJAX调用/confirm-order/<id>，如果order已确认，我想在下次点击后将按钮更改为重定向到/my-orders/。问题是它再次调用相同的JQuery函数。我已经尝试删除class="confirm-button"属性以再次避免JQuery，但它不起作用。我该怎么办？

如果按钮已被移除并被文本＆＃34;确认＆＃34;替换就足够了，但是this.html（）仅更改内部html，这是按钮的文本。

 $(document).ready(function () {
        $(".confirm-button").click(function (b) {
            b.preventDefault();
            var $this = $(this);
            var id = this.value;
            var url = '/confirm-order/'+id;

            $.ajax({
                type: 'get',
                url: url,
                success: function (data) {
                    $this.empty();
                    $this.attr('href','/my-orders/');
                    $this.parent().attr("action", "/my-orders/");
                    $this.html('Confirmed');
                }
            })
        });
    });

Answer 1

您可以添加success功能，例如：$this.data('isConfirmed', true);

然后在您的点击处理程序中首先检查它。如果是，则将用户重定向到下一页。

$(".confirm-button").click(function (b) {
    b.preventDefault();
    var $this = $(this);

    if ($this.data('isConfirmed')) {
        ... redirect code ...
    }
    else {
        ... your regular code ...
    }
}

Answer 2

事件处理程序仍将附加到按钮，因此将再次运行：

b.preventDefault();

将阻止默认，即打开href。您需要在成功时删除事件处理程序。您使用jQuery #off()方法：

$(".confirm-button").off('click');

或更短时间：

$this.off('click');

Answer 3

在文档准备好之后，您需要使用.on()而不是.click()来捕获事件，因为稍后会出现“新建”按钮。

请参阅http://api.jquery.com/on/

$(document).ready(function() {
  $('.js-confirm').click(function(){
    alert('Confirmed!');
    $(this).off('click').removeClass('js-confirm').addClass('js-redirect').html('Redirect');
  });
  
  $(document).on('click', '.js-redirect', function(){
    alert('Redirecting');
  });
});

<button class="js-confirm">Confirm</button>

使用AJAX更改按钮的行为

3 个答案: