Флажок не работает в замененном контенте - PullRequest
Новая
       16

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

0 голосов
/ 03 сентября 2011

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

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

<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 работает. Если я нажимаю на компанию (которая должна быть скрыта), другая не снимает флажок или проверяет, но содержимое заменяется должным образом.

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

Ответы [ 3 ]

0 голосов
/ 03 сентября 2011

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

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

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

0 голосов
/ 03 сентября 2011

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

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

0 голосов
/ 03 сентября 2011

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

Так что вместо: 

$(elements).change();

используйте 

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