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

当我第一次单击 a<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) {