dialogue jqModal - seulement afficher une fois

Question

J'ai une boîte de dialogue jqModal avec le code suivant:

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

    }); 

    }); 

Le code HTML utilisé est comme suit:

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

Quand je clique sur un <td>, la la boîte de dialogue se lance sans problème. Au second clic (ou suivant), la classe new est ajoutée au <div>, mais la boîte de dialogue ne démarre pas.

Answer 1

Photographié dans le noir ici, si vous dites que le modal n'est pas recréé, essayez de ne pas le détruire manuellement, mais appelez plutôt sa méthode .jqdHide(). En outre, votre input gestionnaire de clic est dans le gestionnaire de clic de <td>, pas sûr si cela est intentionnel, pour fixer à la fois régler votre code à ceci:

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

Si dans le code que vous vous ajouter<td> éléments et le gestionnaire de clic ne se déclenche pas pour eux, alors vous devez utiliser .live() de sorte que le gestionnaire travaille sur <td> actuels et futurs éléments avec cette combinaison de classe, donc au lieu de ceci:

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

vous appelleraient ceci:

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