onclick="return confirm('')" working with $('.class').click(function () {});

Question

I have this function that disables the input after user clicks:

$('.click-off').click(function () {
    var btn = this;
    setTimeout(function () { $(btn).attr('disabled', 'disabled'); }, 1);
    return true;
});

And I have this input with a javascript confirmation:

<input type="submit" class="click-off" onclick="return confirm('Are you sure?');" value="Delete">

Even if I click "cancel" in the confirmation box, the $('.click-off').click() event is called, and the button becomes disabled.

The $('.click-off').click() is used by a lot of inputs, so the confirmation can't be inside of it.

How can I check the confirm return in the $('.click-off').click event? Or even prevent the $('.click-off').click event to be called?

Answer 1

Why would you have these pieces of logic be separate in the first place? Here are 2 methods to get around the problem:

Combine the logic into a single method:

$('.click-off').click(function () {
    // escape here if the confirm is false;
    if (!confirm('Are you sure?')) return false;
    var btn = this;
    setTimeout(function () { $(btn).attr('disabled', 'disabled'); }, 1);
    return true;
});

Use a global variable (or object preferably):

var clickOffConfirmed = false;

<input type="submit" class="click-off" onclick="clickOffConfirmed = confirm('Are you sure?');" value="Delete" />


$('.click-off').click(function () {
    // escape here if the confirm is false;
    if (!clickOffConfirmed) return false;
    var btn = this;
    setTimeout(function () { $(btn).attr('disabled', 'disabled'); }, 1);
    return true;
});

Answer 2

Try capturing the confirm box then disabling the button.

$('.click-off').click(function () {
  var r=confirm("Press a button");
  if (r==true)
  {
    $(this).attr('disabled', 'disabled');
  }
  else
  {

  }
});

also remove the onclick

Answer 3

You should avoid hooking actions both with jquery and onclick, primarily because soon you will be totally lost in your code.

So for example you can do this:

$('.click-off').click(function () {

   var r=confirm("Are you sure?")
   if (r==true)
   {
       var btn = this;
       setTimeout(function () { $(btn).attr('disabled', 'disabled'); }, 1);
       return true;
   }
   else
   {
       //nothing to do here
   }

});

And remove the onclick event. So you will have everything in one place.

In your example you hook twice to the click event, and they both get fired despite the results of each other.