在event.preventDefault（）之后重新启用按钮默认值

Question

I have a button like this in my html:

<button id="target" url="foo.com">Button Text</button>

Then I have a method to disable it:

disableButton = function () {
    $("#target").click(function (event) {
        event.preventDefault();
    });
};

And I have a second method that I call after the disableButton method to reenable it:

enableButton = function() {
    $('#target').unbind('click');
    $('#target').bind('click');
    $("#target").trigger('click');
}; 

The problem is, when I call enableButton(), it doesn't trigger the button click. It only works if I call the enableButton() method and then manually click the button. Can anyone tell me how to make the enableButton() method trigger a button click when called?

Basically the workflow should be:

1) #target is clicked

2) #target is disabled until we get a response from some outside source

3) Response is received

4) Trigger a button click for #target without having to manually click the button again

Answer 1

You could try this.

disableButton = function () {
    $("#target").off("click");
};

enableButton = function() {
    $('#target').on("click", clickevent);
    $('#target').click();
};

where clickevent is a method which will be called when the button is clicked.

PS. Correct your code (quotes in the code). jQuery doesnt support unicode.

Answer 2

You do not need to on/off events, click events will not invoke if you enable/disable button.

Use .prop('disabled', callback) set one or more properties for every matched element. [ Ref ]

Try this:

 $('#enDis').on('click', function() { $('#myBtn').prop('disabled', function() { return !this.disabled; }); }); $('#myBtn').on('click', function() { alert('It is enabled!'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button id='myBtn'>Main Button</button> <button id='enDis'>Enable/Disable</button>