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