Milano Milano - 2 years ago 135
Ajax Question

Change behavior of button using AJAX

I'm trying to figure out how to change behaviour of a button using AJAX.

When the button is clicked, it means that

confirmed order recently created.
and if the
has been confirmed, I want to change the button to redirect to
after next click on it. The problem is that it calls again the same
function. I've tried already to remove
attribute to avoid
again but it does not work. What should I do?

It would be enough, if the button has been removed and replaced by text "Confirmed", but this.html() changes only inner html which is a text of the button.

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

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

Answer Source

The event handler will be still attached to the button, so this will run again:


which will prevent the default, which is opening the href. You need to remove the event handler on success. You use the jQuery #off() method:


or more shortly:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download