title: jQuery Function to load content from page into Modal Dialog
body: <p>I have the following function that should load the div id "content" into the Modal Dialog for any link with the id of "#modal".</p>
  
  <p>EDIT</p>
  
  <p>I understand that ID's must be unique, but in this instance, there is no repetition of #modal on any of the pages that would actually use this function. I have even made #modal a class by specifing .modal instead of #modal. the result is the same</p>
  
  <p>END EDIT</p>
  
  <pre><code>// Load external content in modal
  $(document).ready(function(){       
      $('#modal').on('click', function(event){
          var $link = $(this);
          var $dialog = $('&lt;div&gt;&lt;/div&gt;')
              .load($link.attr('href') + ' #content')
              .dialog({
                  autoOpen: false,
                  modal: true,
                  resizable: false,
                  draggable: false,
                  overflow: scroll,
                  title: $link.attr('title'),
                  width: $link.attr('width')
              });
  
          $link.click(function(){
              $dialog.dialog('open');
              return false;
          });
      });
  });
  </code></pre>
  
  <p>What happens though is that the click event just goes to the link instead of loading the external page into the Modal Dialog. All required jQuery and jQuery UI libraries are included and linked from the Google jQuery repository. From what I've read and examples I've seen this SHOULD work.</p>
  
  <p>I have also tried using </p>
  
  <pre><code>$('#modal').bind('click', function(){
  </code></pre>
  
  <p>and</p>
  
  <pre><code>$('#modal').click(function(){
  </code></pre>
  
  <p>Thanks in advance</p>