показать / скрыть динамически добавленные div, используя jQuery

Question

У меня есть небольшой выпадающий список, позволяющий пользователю выбрать количество членов семьи, которые он хочет зарегистрировать для участия в мероприятии.Но если члены семьи не являются гражданами США, я хочу показать второй набор вариантов для них, чтобы войти.Я могу динамически добавлять элементы, но я не знаю, как показать / скрыть поля гражданства.

Я новичок в jQuery и, возможно, я делаю это неправильно, но вот функция, которая добавляет поля:

function familySize() {
        while (famElements < $("#famNum").val()) { // add fields
                    addFields = '<div class="member"> Name:&nbsp;<input id="name" type="text" placeholder="Name" required> &nbsp;&nbsp;<input id="cit" type="checkbox" onChange="citizenInfo()" >&nbsp;&nbsp;Non U.S. Citizen?<br/></div> <div class="citInfo" style="display:none"> <input id="countryCitizenship" type="text" placeholder="Citizenship" required> </div>';
                    document.getElementById('famItems').innerHTML += addFields;
                    famElements++;
                }
        while (famElements > $("#famNum").val()) { // remove fields
            console.log("remove one");
             $('#famItems div:last').remove();
             famElements--;
        }
    }

<div id="famItems">
            </div>

Стиль = "display: none"в CitInfo div изначально скрывает его, но мне просто нужно выяснить, как фиксировать щелчки на флажках, чтобы скрыть / показать текстовые вводы гражданства.

Answer 1

Используйте функцию jQuery live для обработки событий динамически создаваемых элементов.

$(function(){
    $('#cit').live('change', citizenInfo());
});

Answer 2

Если вы используете jQuery, просто используйте селектор вместо getElementById() и используйте append() для добавления контента к нему.

Кроме того, у вас никогда не должно быть двух предметов с одинаковым идентификатором. Вы можете отсортировать его, добавив свой счетчик famElements к идентификаторам полей ввода. Поскольку это изменение исключало выбор элементов по идентификатору, я также изменил ваши флажки, чтобы иметь класс cit, поэтому я могу прикрепить событие с помощью простого селектора.

Для события click вы можете использовать .live() или .delegate(), поэтому вам не нужно постоянно связывать события.

function familySize() {
    while (famElements < $("#famNum").val()) { // add fields
        famElements++;
        addFields = '<div class="member"> Name:&nbsp;<input id="name'+famElements+'" type="text" placeholder="Name" required> &nbsp;&nbsp;<input class="cit" id="cit'+famElements+'" type="checkbox" onChange="citizenInfo()" >&nbsp;&nbsp;Non U.S. Citizen?<br/></div> <div class="citInfo" style="display:none"> <input id="countryCitizenship'+famElements+'" type="text" placeholder="Citizenship" required></div>';
        $('#famItems').append(addFields);
    }
    while (famElements > $("#famNum").val()) { // remove fields
        console.log("remove one");
        $('#famItems div:last').remove();
        famElements--;
    }
}

// Your jQuery ready function
$(function(){
    // Click event on checkboxes
    $('#famItems').delegate('.cit','click',function(){
        var $this = $(this);

            // Show or hide the div
        if($this.is(':checked')){
            $this.parent().find('.citInfo').hide();
        } else {
            $this.parent().find('.citInfo').show();
        }
    });
});

Вы можете создавать свои элементы более элегантно с помощью jQuery, но он делает то, что ему нужно. Хотя вы можете подумать об этом, если вы добавите свой HTML, и этот большой кусок текста станет слишком большой загадкой.

Answer 3

Я наконец понял это только методом проб и ошибок.Если я заключу оба div "member" и div "citInfo" в другой div, а затем поменяю определение флажка следующим образом:

<input class="cit" onChange="citizenInfo(this)" type="checkbox">

, тогда все, что мне нужно, это эта функция:

function citizenInfo(chkBox) {
 $(chkBox).parent().parent().find('.citInfo').toggle();
}