Не работает код, при добавлении классов в исходный код

Рейтинг: 0Ответов: 3Опубликовано: 06.04.2015

Всем привет, в jQuery и JS я ещё новичок и столкнулся с проблемой.
Есть код, который при клике на checkbox добавляет код в блок:

$('input[name="mods[]"]').click(function(){ 
var mid = $(this).data('id');
    if($(this).prop("checked") == true){
        $('.modal-box-list-'+ mid).remove();
        $('.modal-list-mods').append('<div class="modal-box-list-'+ mid +'"><div class="modal-box-list" data-lid="'+ mid +'"><label class="checkbox"><input type="checkbox" class="modal-input-list" checked="checked"><span></span>'+ $(this).data('name') +'</label></div></div>');
    }
    if($(this).prop("checked") == false){
        $('.modal-box-list-'+ mid).remove();
    }   
});

Мне нужно сделать чтобы при клике в данном блоке на checkbox снимался бы "главный" checkbox (тот который добавляет код в блок), но:

$('.modal-box-list').click(function(){
    alert('ok');
});

Уже не работает, вероятно из-за того что при загрузке в исходной странице данный блока не было.

javascript jquery
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

jquery.on() - вам поможет данный метод в решении вашей проблемы

▲ 2

Чтобы расширить принятый ответ до более понятного, следует указать, что наилучший способ решить Вашу проблему -- это использовать так называемые делегированные события (delegated events). Работает это следующим образом.

jQuery имеет универсальный метод on, с помощью которого можно назначить событие click для любого статического родителя требуемого динамического элемента (селектор для него указывается вторым параметром функции). По умолчанию, при клике на любой объект в DOM дереве, браузер пытается найти среди родителей этого элемента все, которые имеют установленные замыкания на конкретное событие (в нашем случае click) и вызывает эти события. Метод on в режиме "делегирования" проверит попадает ли реально вызвавший событие потомок под заданный вторым параметром селектор. Если попадает -- вызывает замыкание на событие, если нет, то пропускает.

В Вашем случае требуется назначить событие click для ближайшего статически созданного (существующего на момент установки события) элемента в дереве элементов. Полагаю, что такими родителями могут являться элементы с классом modal-list-mods. Отсюда, искомый код будет выглядеть следующим образом:

$('.modal-list-mods').on('click', '.modal-box-list', function() {
    console.log('произведен клик на элементе с классом "modal-box-list"');
});

Подробное описание метода доступно в документации к jQuery[en].

▲ 1

Нужно повторно привязать обработчик события для нового элемента (после добавляения)