jQuery code not firing
<p>I have a jQuery pop-up dialog, and at the top there is a <strong>close</strong> link. For some reason the code is never called here: I've watched in the debugger.</p>

<p>I assume it is something simple, as the open code works fine.</p>

<p>The javascript code is:</p>

<pre><code>$(document).ready(function(){
  $('#dialogOpen').click(function() {
    console.log("link clicked");
    openDialog('#dialog');
  });

$('#dialog').find('.ok')
  .on('click', function() {
    console.log("ok clicked");
    closeDialog(this);
  })
});

function openDialog(selector) {
  $(selector)
    .clone()
    .appendTo('#overlay')
    .show()
    .parent()
    .fadeIn('fast');
  }

function closeDialog(selector) {
  $(selector)
    .parents('#overlay')
    .fadeOut('fast', function() {
       $(this)
         .find('.dialog')
         .remove();
       });
}
</code></pre>

<p>The html snippet:</p>

<pre><code>  &lt;div id="dialog" class="dialog"&gt;
     &lt;a href="#" class="ok"&gt;Close Dialog&lt;/a&gt;
  &lt;div&gt;
</code></pre>

<p>The full code is here: <a href="https://gist.github.com/sfcarroll/4739040" rel="nofollow">https://gist.github.com/sfcarroll/4739040</a></p>
