How this jquery code will work? -

<a id="page-help" href="page.html" onclick="window.open(this.href, 'popupwindow', 'width=500,height=300'); return false;">what this?</a>  $(document).ready(function() {     $('#page-help').each(function() {         var $link = $(this);         var $dialog = $('<div></div>')             .load($link.attr('href'))             .dialog({                 autoopen: false,                 title: $link.attr('title'),                 width: 500,                 height: 300             });          $link.click(function() {             $dialog.dialog('open');              return false;         });     }); }); 

please see above code , tell me how works. far knowledge seems when page load jquery dialog created , loaded shown when user click on link. right if yes approach not because if attach way jquery code links in page many jquery dialog load in page content , may slow down page loading......am right?

yes, you're right, wouldn't problem when have 1 dialog preload, case when using id selector.

if had more 1 more optimal load contents after user has clicked on link, this:

$(document).ready(function() {     $('a[rel=dialog]').on('click', function(e){         var $link = $(this);         var $dialog = $('<div></div>')             .load($link.attr('href'))             .dialog({                 autoopen: true,                 title: $link.attr('title'),                 width: 500,                 height: 300             });          e.preventdefault();     }); }); 

it work assuming have links marked <a href="contents.html" rel="dialog">