guptarohit49
New Member
I just realized that different behaviour exists for \[code\]<a>\[/code\] and \[code\]<input>\[/code\] tag.\[code\]<div id="dialog">Your non-modal dialog</div><!--<a href="http://stackoverflow.com/questions/13721667/#" id="open">Open dialog</a>--><input id="open" value="http://stackoverflow.com/questions/13721667/Open dialog">\[/code\]\[code\]$('#open').click(function() { $('#dialog').dialog('open');});$('#dialog').dialog({ autoOpen: false, modal: false});// Close Pop-in If the user clicks anywhere else on the pagejQuery('html') //set for html for jsfiddle, but should be 'body' .bind('click', function(e){ if (jQuery('#dialog').dialog('isOpen') && !jQuery(e.target).is('.ui-dialog, a') && !jQuery(e.target).closest('.ui-dialog').length) { jQuery('#dialog').dialog('close'); alert("close_dialog"); } });\[/code\]If using \[code\]<a>\[/code\], the click event is not propagated to document. If using \[code\]<input>\[/code\], the click event is bubbled to document, and clicking on the input directly closes the dialog. I know this can be handled with stopPropagation. The question is why \[code\]<a>\[/code\] tags event doesn't bubble up ? Am I missing something ?Here is a fiddle to demonstrate. Uncomment the \[code\]<a>\[/code\] and comment the \[code\]<input>\[/code\], and click on it to see the differences.Code borrowed from on Jason's answer in this question.