使用AJAX更改按鈕的行爲

我想弄清楚如何使用AJAX更改按鈕的行爲。使用AJAX更改按鈕的行爲

單擊按鈕時，表示user已確認最近創建的訂單。 AJAX調用/confirm-order/<id>，如果order已被確認，我想在下次點擊它之後將按鈕改爲重定向到/my-orders/。問題是，它再次調用相同的功能JQuery函數。我已經嘗試刪除class="confirm-button"屬性以避免再次使用JQuery，但它不起作用。我該怎麼辦？

如果按鈕已被刪除並被文本「Confirmed」替換，但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'); 
       } 
      }) 
     }); 
    });

來源

2016-06-08 Milano Slesarik

事件處理程序將仍然附加到按鈕，因此這將再次運行：

b.preventDefault();

，這將阻止默認，這是打開href。您需要在成功時移除事件處理程序。您可以使用jQuery的#off()方法：

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

以上不久：

$this.off('click');

來源

2016-06-08 13:56:10 meskobalazs

你好，這就是問題所在，我想不出如何刪除成功的處理程序。 –

添加了代碼片段 – meskobalazs

您可以添加到您的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 ... 
    } 
}

來源

2016-06-08 13:55:56

您需要使用.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>

來源

2016-06-08 13:59:44 andr

使用AJAX更改按鈕的行爲

回答

相關問題