Question

I got an update panel which contains a gridview and inside each row images (delete icons) to delete that row. I’m trying to condition that given an answer on a regular JavaScript confirm pop up.

$(function(){
    $("img.delete").on("click", function(evt){ 
        return false; //Does not work
        /*or*/
        evt.preventDefault();//Does not work either
    });
});

Html rendered:

    <td>
        <img id="ctl00_ctl00_ctl00_ctl00_ctl00_ctl00_ContentPlaceHolderDefault_Content_Content_Content_Content_DashboardGrid_ctl02_DeleteControl140" class="delete" onclick="__doPostBack('ctl00$ctl00$ctl00$ctl00$ctl00$ctl00$ContentPlaceHolderDefault$Content$Content$Content$Content$DashboardGrid','Delete$0')" width="20" height="20" title="Remove item from your list." src="/images/delete_item.png" alt="Remove item from your list." style="border-width:0px;">
</td>

It doesn’t work because a postback is always performed by the update panel which has its UpdateMode to its default in the sense that I’m not setting it in the markup.

Answer 1

The answer provided by ThiefMaster worked for me, at: preventDefault() doesn't work with a minor tweak for my case:

function pageLoad() 
{
  var inlineFunction = new Function($('img.delete').attr('onclick'));
  $('img.delete').click(function(event){
    if(!confirm('Are you sure?')) {
        event.stopImmediatePropagation();         
    }
  }).click(inlineFunction).removeAttr('onclick');
}

The pageLoad event is available when using updatepanel+scriptmanager which lets me re-attach the event handlers on every partial postback.