Флажок не работает в замененном контенте

Question

Так что в моем коде есть странное поведение, и я не знаю почему.

Я использую Uniformjs так, например, флажок выглядит так:

<label>Check Boxes</label>
    <div class="input_group">
      <div class="checker"><span><input style="opacity: 0;" name="option" value="option 1" type="checkbox"></span></div>First option<br>
      <div class="checker"><span><input style="opacity: 0;" name="option" value="option 2" type="checkbox"></span></div>Second option<br>
      <div class="checker"><span><input style="opacity: 0;" name="option" value="option 3" type="checkbox"></span></div>Third option
    </div>

Итак, когда опция проверки отмечена, родительский диапазон добавляет класс "флажок".

Поэтому я пытался разработать систему, в которой пользователь мог бы добавить пользователя и выбрать между созданием нового адреса для этого пользователя или использованием адреса компании.

Оба адреса загружаются в разные div, а корпоративный адрес скрывается, поэтому я сделал эту функцию:

$('input[name="company_addr"]').change(function(){
            var checked = $(this).is(':checked');
            $('input[name="company_addr"]').each(function(){
                $(this).attr('checked',checked);
                if (checked)
                    $(this).parent().addClass('checked');
                else
                    $(this).parent().removeClass('checked');
            });
            if (checked){
                newAddrContent = block_new.html();
                block_new.html(block_company.html());
            }
            else{
                block_new.html(newAddrContent);
            }
        });

Если я удаляю последний if... else и показываю адрес компании, я вижу, как меняются обе проверки, так что эта часть работает безупречно.

Однако флажок внутри block_new больше не работает, а блок block_company работает. Если я нажимаю на компанию (которая должна быть скрыта), другая не снимает флажок или проверяет, но контент должным образом заменяется.

Что может происходить?

Answer 1

Наконец-то, похоже, ошибка с заимейшей строкой прокомментирована здесь: github.com/pixelmatrix/uniform/issues/180

Если кому-то интересно, как мне удалось решить эту проблему, я просто изменил метод, чтобы показать, скрыть правильные элементы div, поэтому при отправке формы я проверяю, какой элемент div скрыт, и обрабатывать форму с учетом этого.

Answer 2

Проблема в том, когда вы создаете новый input на лету change событие не восстанавливается. Вы можете исправить это с помощью .delegate Документы

$('.input_group').delegate('input[name="company_addr"]', 'change', function(){
             //do your stuff
});

Причины использовать делегат в прямом эфире

Answer 3

Вы используете check(), который является одноразовой функцией. Вы должны связать живое событие с.live(событие, функция), чтобы обработчик работал с будущими элементами.

Так просто вместо:

$(elements).change();

использование

$(elements).live('change', function() {
...
});