Диалог jqModal - отображается только один раз

Question

У меня есть диалог jqModal со следующим кодом:

  $(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();
            });

    });

  });

HTML-код выглядит следующим образом:

 <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>

Когда я впервые нажимаю <td>, диалог запускается без проблем. На втором щелчке (или последующем) new класс добавляется к <div>, но диалог не запускается.

Answer 1

Снимок сделан в темноте, если вы говорите, что модал не воссоздан, попробуйте не уничтожать его вручную, а вызывать его .jqdHide() метод. Кроме того, ваш input обработчик кликов находится внутри <td> Обработчик кликов, не уверен, что это намеренно, чтобы исправить оба кода:

$(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();
  });
});

Если в коде вы добавляете <td> элементы и обработчик кликов не стреляет по ним, тогда вам нужно использовать .live() так что обработчик работает на настоящее и будущее <td> элементы с этой комбинацией классов, поэтому вместо этого:

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

Вы бы назвали это:

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