Question

I have a simple function that inserts an animated “working” image, and then display “done!” after the POST is completed. However, I want this to occur in multiple places at once.

Example at: http://veretekk.com/developer/temp/

More detail is outlined at the page above, but basically the #dialog element is hiding when the button contained inside it is clicked. Also… the reason the jquery uses .on rather than $(document).ready(function() { is that this content can appear on my site after the DOM is loaded and thus needs to be available at all times. Help!

Answer 1

I think a lot of your problem lies in the complicated way you are determining whether or not to hide the dialog.

Instead of trying to intercept each document click and determine its target, let jQuery handle the details:

$(document).on('click', function (event) {
    // If the document is clicked, hide the dialog
    $('#dialog').hide();
});

$(document).on('click', '#dialog', function (event) {
    // If the dialog is clicked, stop the propagation
    // of the click event to the document
    // The first handler will never be called
    event.stopPropagation();
});

Simplified demo: http://jsfiddle.net/jtbowden/M93dZ/