Вопрос относительно отношений родитель / потомок с динамически генерируемыми флажками с использованием jquery - PullRequest
Новая
       22

Вопрос относительно отношений родитель / потомок с динамически генерируемыми флажками с использованием jquery

1 голос
/ 01 июня 2010

У меня есть форма флажков, которая динамически генерируется на основе контента пользователя. Разделы флажков разбиты по категориям, и у каждой категории есть свои проекты. Для целей базы данных значения категорий имеют флажки, которые скрыты. ЕСЛИ у категории есть подпункты, которые имеют флажки, которые отмечены, ТОГДА флажок категории также установлен.

Я получил это нормально, используя JQuery .click (), но я не могу понять, как это сделать при загрузке страницы.

Вот мой код для того, когда флажок фактически установлен: 

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

    }
 });

Теперь, когда я редактирую статус этих блоков (то есть после того, как они были сохранены в БД), поля категорий не отображаются как отмеченные, даже если отмечены их дочерние проекты. Что я могу сделать, чтобы флажок моей категории был отмечен во время загрузки, если отмечен дочерний элемент этой категории?

Часть проблемы, я думаю, связана с динамически изменяющейся настройкой родительского дочернего элемента. Как я могу найти родительский блок, чтобы проверить его? Спасибо!

Ответы [ 2 ]

0 голосов
/ 01 июня 2010

Я бы рекомендовал использовать метод live () для привязки ваших триггеров, он предназначен для применения привязки к динамически создаваемым элементам.

0 голосов
/ 01 июня 2010

EDIT:

Допустим, родительские элементы имеют уникальный класс. 

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

Вы можете сделать что-то подобное при загрузке страницы: 

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

Это вернет .parent элементов, у которых есть хотя бы один потомок, имеющий класс project и проверенный.

Документы для : имеет селектор http://api.jquery.com/has-selector/

Если вы хотите запускать обработчик click при загрузке страницы, вы можете запустить его вручную. 

$(".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

Это сокращение для: 

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