How do I add confirm function to links in jQuery so that the dialog always appears?

Question

I have a HTML table that displays rows of records and has a column on the end with a delete link. Each delete link has a class of confirm-delete. I need to have a confirm dialog popup on click and as it is used in multiple pages, have created a confirm function in an external JS file.

I have added the function call to the link's click using jQuery [code at bottom of post] and it works fine until the dialog has been confirmed once [user has clicked OK]. Then the function is no longer called.

I think I am missing something pretty simple though as I don't use JS/jQuery much I may have a gap in my knowledge. Why does it work fine until the first OK? It appears to be storing a reference to the result and reusing it rather than a unique one for each link.

Here's the code when 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

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

Answer 2

@bradenkeith is probably correct with his answer but you might want to leverage jQuery a little more and do a jQuery dialog as well.

$("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 that might be easier to read and maintain in my opinion.

Just an option. :)

Answer 3

After the user clicks OK the first time, do you somehow reload the table dynamically? If so, it could be that the event isn't bound to the re-loaded table. Try a live event handler instead:

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

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