jqModal dialog - only displaying once

Question

I've got a jqModal dialog with the following code:

  $(document).ready( function() {

    $('td.item.active').click( function(e) {

      $(this).append( '<div class="new">&nbsp;</div>' );

            $("#jqModal").jqm({
                modal:true, 
                onHide: function(e) { 
                    e.w.hide(); // Hide window
                    e.o.remove(); // Remove overlay
                }
            });

            $('#jqModal').jqmShow();

            $('input#add_session').click( function(e) {
              e.preventDefault();
                $('#jqModal').hide();
                $('.jqmOverlay').remove();
            });

    });

  });

The HTML used is as follows:

 <div id="jqModal" class="jqmWindow">
    <form action="" method="post">

      <ul>

        <li>
          <input id="add_session" name="commit" type="submit" value="Add Session" /> <input type="button" name="close" value="Close" id="close" class="jqmClose" />
        </li>

      </ul>

    </form>
  </div>

When I first click a <td>, the dialog launches without a problem. On the second click (or subsequent), the new class is added to the <div>, but the dialog doesn't launch.

Answer 1

Shot in the dark here, if you're saying the modal isn't re-created, try not destroying it manually, but rather calling it's .jqdHide() method. Also, your input click handler is inside the <td>'s click handler, not sure if this is intentional, to fix both adjust your code to this:

$(function() {
  $('td.item.active').click( function(e) {
    $(this).append( '<div class="new">&nbsp;</div>' );
    $("#jqModal").jqm({
      modal:true, 
      onHide: function(e) { 
        e.w.hide(); // Hide window
        e.o.remove(); // Remove overlay
      }
    }).jqmShow();
  });
  $('input#add_session').click( function(e) {
    e.preventDefault();
    $('#jqModal').jqmHide();
  });
});

If in code you you're adding <td> elements and the click handler isn't firing for them, then you need to use .live() so the handler works on current and future <td> elements with that class combination, so instead of this:

  $('td.item.active').click( function(e) {

You would call this:

  $('td.item.active').live('click', function(e) {