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;
});