jQuery Déclenchement de l'événement de clic lorsque le nombre maximum d'enfants est affiché

Question

J'ai un formulaire de détails personnels qui vous permet d'entrer un certain nombre de dépendances qui est déterminé par l'application JSP.

La première personne dépendante est visible et l'utilisateur a la possibilité d'ajouter des dépendances jusqu'au nombre maximal. Toutes les autres dépendances sont masquées par défaut et s'affichent lorsqu'un utilisateur clique sur le bouton "Ajouter un autre bouton dépendant".

Lorsque le nombre maximal de personnes à charge a été atteint, le bouton est grisé et un message est généré via jQuery et affiché pour le dire à l'utilisateur. Le problème que j'ai est lorsque le nombre maximum de personnes à charge a été atteint le message est affiché, mais l'utilisateur peut cliquer sur le bouton pour ajouter plus de dépendants et le message continue à générer. Je pensais que la dissociation de l'événement click permettrait de trier cela, mais il semble être encore capable de générer un second message.

Voici la fonction que j'ai écrit pour générer le message:

// Dependant message function 
function maxDependMsg(msgElement) { 
    // number of children can change per product, needs to be dynamic 
    // count number of dependants in HTML   
    var $dependLength = $("div.dependant").length; 

    // add class maxAdd to grey out Button 
    // create maximum dependants message and display, will not be created if JS turned off 
    $(msgElement) 
    .addClass("maxAdd") 
    .after($('<p>') 
    .addClass("maxMsg") 
    .append("The selected web policy does not offer cover for more than " + $dependLength + " children, please contact our customer advisers if you wish discuss alternative policies available.")); 
} 

Il y a un lien avec un événement click attaché comme ceci:

$("a.add").click(function(){ 

    // Show the next hidden table on clicking add child button 
    $(this).closest('form').find('div.dependant:hidden:first').show(); 

    // Get the number of hidden tables 
    var $hiddenChildren = $('div.dependant:hidden').length; 

    if ($hiddenChildren == 0) { 

     // save visible state of system message 
     $.cookies.set('cpqbMaxDependantMsg', 'visible'); 

     // show system message that you can't add anymore dependants than what is on page 
     maxDependMsg("a.add"); 

     $(this).unbind("click"); 

    } 

    // set a cookie for the visible state of all child tables 
    $('div.dependant').each(function(){ 

     var $childCount = $(this).index('div.dependant'); 

     if ($(this).is(':visible')) { 
      $.cookies.set('cpqbTableStatus' + $childCount, 'visible'); 
     } else { 
      $.cookies.set('cpqbTableStatus' + $childCount, 'hidden');  
     } 

    }); 

    return false; 
}); 

Tout le code des cookies est pour sauver l'état lorsque les utilisateurs reviennent en arrière tout au long du processus.

Answer 1

Assurez-vous qu'il compte vraiment vos divs cachés, déboguer avec console.log($hiddenChildren); ou alert($hiddenChildren);. De plus, vous n'avez vraiment pas besoin de délier la fonction et de la lier à nouveau. Utilisez simplement return false; au lieu de $(this).unbind("click");. Chose est que je ne suis pas sûr :hidden correspond à des éléments qui ont juste display: hidden; ou ils doivent être cachés avec .hide();. Gardez à l'esprit que :hidden correspond également <input type="hidden" /> donc si vous avez un tel filtre en utilisant :not(). J'espère que cela vous aidera à résoudre votre problème.