Insert a confirm() in a jQuery click event that I don't have control of

Question

In our web application, when we upload a document, there is a remove image in the end that upon being clicked, will remove the document uploaded. The problem is users often click the icon unintentionally and they don't even know they removed something.

The code for the onclick event is

<input type="image" name="xxxxxgbcremove" id="xxxxxgbcremove" class="RemoveImage" src="..." alt="Delete" onclick="$find('xxxfieldIDxxx').removeValue(xxxx); ;" style="border-width:0px;Display:Block;">

I want to insert a confirm() function when the image is clicked, users can select yes or no to proceed or cancel the removing. the problem is I don't have control over the code above. But I do have the ability to add new scripts.

I have tried unbind click but didn't work.

$(document).ready(function() {
$("[id$='remove']").unbind('click');
});

How do I "insert" a confirm() to the onclick event that came with the app? Ideally the original onclick event should be temporarily stopped before user make decision in the confirm() box, if user click yes, then proceed with the original remove procedure.

Thanks!

Answer 1

Inline event handlers can't be disabled by jQuery's unbind(), you'll need to change the inline handler and add whatever code you need :

$(document).ready(function() {
    var myOnclick = $("[id$='remove']").attr('onclick');
    $("[id$='remove']").attr('onclick', 'if (confirm("Continue")) ' + myOnclick);
});

Be aware that your selector could match more than one element, and then you'd need to iterate.

EDIT:

Or if there's more than one element:

$(document).ready(function() {
  $("[id$='remove']").each(function(i, ele) {
     $(ele).attr('onclick', 'if (confirm("Continue")) ' + $(ele).attr('onclick');
  });
});

Answer 2

does it work?:

onclick="if (confirm('my message')) $find('xxxfieldIDxxx').removeValue(xxxx);"