How to add confirmation function to links in jQuery so that the dialog always displays?

Question

I have an HTML table that displays rows of records and has a column at the end with a delete link. Each delete link has a confirmation-delete class. I need the confirmation pop-up dialog box to click and, since it is used on multiple pages, to create a confirmation function in an external JS file.

I added a function call to the link using jQuery [the code at the bottom of the message], and it works fine until the dialog is confirmed after [user clicked OK]. Then the function is no longer called.

I think I am missing something quite simple, although since I am not using JS / jQuery, I may have a gap in my knowledge. Why does it work fine until the first OK? It seems to be storing a link to the result and reusing it, rather than unique to each link.

Here is the code used on the Notes page:

$(function() { // Add Confirmation dialogs for all Deletes $("a.confirm-delete").click(function(event) { return fConfirmDelete('Note'); }); }); 

And the fConfirmDelete function

 function fConfirmDelete( deleteObj ) { return confirm('Are you sure you wish to delete this ' + deleteObj + '?'); } 

Answer 1

After the user clicks OK for the first time, do you somehow reload the table dynamically? If so, it may be that the event is not related to an overloaded table. Try a real-time event handler :

jQuery 1.7 +

 $(function() { // Add Confirmation dialogs for all Deletes $(document).on('click', 'a.confirm-delete', function(event) { return fConfirmDelete('Note'); }); }); 

jQuery 1.3-1.8:

 $(function() { // Add Confirmation dialogs for all Deletes $("a.confirm-delete").live('click', function(event) { return fConfirmDelete('Note'); }); }); 

In the source code, $("a.confirm-delete").click(...) only bind the event to a.confirm-delete objects that are already in the DOM. If you add a new a.confirm-delete element later, the event is not bound to it. Using the jQuery live event handler, the event will be bound to any a.confirm-delete elements that currently exist, or to those that are created dynamically.

Answer 2

@bradenkeith is probably right with his answer, but you can use jQuery a bit and make jQuery dialog.

 $("a.confirm-delete").click(function(event) { var message = fConfirmDelete(deleteObj); var $dialog = $j('<div></div>') .html(message) .dialog({ autoOpen: true, bgiframe: true, buttons: { 'Dismiss': function() { $j(this).dialog('close');} 'Delete': function() { //Do delete things } } modal: true // other parameters here }); }); 

Something like this might be easier to read and maintain, in my opinion.

Just an option. :)

Answer 3

 $(function() { // Add Confirmation dialogs for all Deletes $("a.confirm-delete").click(function(event) { if(fConfirmDelete('Note')){ return true; }else{ return false; } }); });