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

264
12 декабря 2016, 10:07

Всем привет, в 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');
});

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

Answer 1

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

Answer 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].

Answer 3

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

READ ALSO
Как правильно подключить Interface Color Picker?

Как правильно подключить Interface Color Picker?

Использую Interface Color Picker плагин (jquery)Проблема заключается в том, что я не могу подключить его для многих input

292
Отметить чекбокс jquery

Отметить чекбокс jquery

Я пытаюсь отметить чекбокс при нажатии, использую атрибут checkedНапример если стоит галочка для атрибута Возраст, то появляется поле ввода...

277
Как реализовать аналог $(document).ready на чистом JS?

Как реализовать аналог $(document).ready на чистом JS?

Тоже самое только на JSКак перевести?

421