Question concernant les relations parent/enfant avec les cases à cocher générées dynamiquement à l'aide de jquery

Question

J'ai une forme de cases à cocher, qui est généré dynamiquement en fonction du contenu des utilisateurs. Les sections de cases à cocher sont divisées par catégories et chaque catégorie contient des projets. À des fins de base de données, les valeurs de catégorie ont des cases à cocher qui sont masquées. SI une catégorie a des sous-items qui ont des cases à cocher qui sont cochées, ALORS la case à cocher de la catégorie est également vérifiée.

J'ai obtenu ce travail ok en utilisant le JQuery .click(), mais je ne peux pas comprendre comment le faire quand la page se charge.

Voici mon code quand une case à cocher est effectivement cliqué:

$(".project").click(function() { 

    if($(this).is(":checked") && $(this).hasClass("project")) { 
     $(this).parent().parent().children(':first').attr('checked', true); 

    }else if(!$(this).parent().children('.project').is(":checked")){ 
     $(this).parent().parent().children(':first').attr('checked', false); 

    } 
}); 

Maintenant, quand je suis l'édition de l'état de ces boîtes (ce qui signifie après ont été enregistrées dans la db) les cases de la catégorie ne sont pas affichés comme vérifié même si les projets de leurs enfants sont vérifiés. Que puis-je faire pour que ma boîte de catégorie soit vérifiée au moment du chargement si l'enfant de cette catégorie est cochée?

Une partie du problème je pense est avec l'installation parent parent dynamiquement changeante, comment puis-je trouver la boîte parent afin de le faire vérifier? Merci!

Answer 1

EDIT:

Disons que les éléments parents ont une classe unique.

<div class="parent"> 
    <input type="checkbox" /> 
    <div> 
     <input type="checkbox" class="project" checked="checked" /> 
    </div> 
    <div> 
     <input type="checkbox" class="project" /> 
    </div> 
</div> 

Vous pourriez faire quelque chose comme ceci à la page charge:

$('.parent:has(.project:checked)').children(':first').attr('checked','checked'); 

Cela renverra .parent éléments qui ont au moins un descendant qui a la classe project et est cochée.

Docs pour le : a sélecteur http://api.jquery.com/has-selector/

---

Si vous souhaitez exécuter le gestionnaire click lorsque la page se charge, vous pouvez déclencher manuellement.

$(".project").click(function() { 

    if($(this).is(":checked") && $(this).hasClass("project")) { 
     $(this).parent().parent().children(':first').attr('checked', true); 

    }else if(!$(this).parent().children('.project').is(":checked")){ 
     $(this).parent().parent().children(':first').attr('checked', false); 

    } 
}); 

$('.project').click(); // Triggers the click event handler 

C'est un raccourci pour:

$('.project').trigger('click'); // Accomplishes the same as above 

Answer 2

Je vous recommande d'utiliser la méthode live() pour lier vos déclencheurs, il est conçu pour appliquer à des éléments de liaison créés dynamiquement.