JS click event firing before it can be removed by code above the trigger

Question

This is more of a statement and wondering if anyone has experienced this than a question, but here goes. Consider the following code using JQuery:

<input type="submit"
       value="Delete"
       onclick="return doesUserConfirmDelete();" />
<script type="text/javascript">
  function doesUserConfirmDelete()
  {
    return confirm("Do you really want to delete this entry?\n\n" +
                   "Click \'OK\' to delete this entry;\n\n" +
                   "otherwise, click \'Cancel.\'");
  }

  var delBtn = $('input[value="Delete"]');
  console.info(delBtn[0]);
  delBtn.removeAttr('onclick');
  // attempted adding the following, but nothing changed:
  delBtn.removeProp('onclick');
  delBtn.prop('onclick', null);
  delBtn[0].onclick = null;
  // end attempts for naught
  delBtn.off('click');
  delBtn.click();
</script>

When I run the above code in Chrome, the things that happen, in order, are:

Confirm box is shown (even though the onclick was supposedly removed)
I click cancel
console.info message prints to console.

What is going on here? How do I remove the click events from the button and click it so that there's no confirmation dialog?

Nullify the `onclick` property, that's where the listener actually lives. AFAIK `.off` removes listeners added by using `.on` only. — Teemu, Jun 21 '17 at 11:07
I quickly tried adding `delBtn.removeProp('onclick');` after the `delBtn.removeAttr('onclick');` call, but nothing changed. Edit - Also tried with `delBtn.prop('onclick', null);`. Nothing. — Andy, Jun 21 '17 at 11:09

score 0 · Answer 1 · answered Jun 21 '17 at 11:10

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="submit"
       value="Delete"
       onclick="return doesUserConfirmDelete();" />
<script type="text/javascript">
$(document).ready(function(){
    $("input").click(function(event){
        event.preventDefault();
    });
});
  function doesUserConfirmDelete()
  {
    return confirm("Do you really want to delete this entry?\n\n" +
                   "Click \'OK\' to delete this entry;\n\n" +
                   "otherwise, click \'Cancel.\'");
  }

  var delBtn = $('input[value="Delete"]');
  console.info(delBtn[0]);
  delBtn.removeAttr('onclick');
  delBtn.off('click');
  delBtn.click();
</script>

If you want to avoid button to be clickable you can use prevent default.Is this what you asked? Can you give more details if this didn't answer your question.

Thanks for the answer. No, I need the button to be clickable, but I want to remove the confirmation dialog that's being shown by the `onclick` event. — Andy, Jun 21 '17 at 11:12
If you don't to show the confirmation dialog, then you can remove it right? — Hema Nandagopal, Jun 21 '17 at 11:23

score 0 · Answer 2 · answered Jun 21 '17 at 11:38

I found the answer at https://stackoverflow.com/a/19470348/493807

I just needed to clone the element after removing the onclick attribute, and click the clone.

delBtn.removeAttr('onclick');
var clone = delBtn.clone();
clone.replaceAll(delBtn);
clone.click();

JS click event firing before it can be removed by code above the trigger

2 Answers2