Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Не могу разобраться с делегированием (https://javascript.ru/forum/jquery/60737-ne-mogu-razobratsya-s-delegirovaniem.html)

razorg1991 17.01.2016 15:22

Не могу разобраться с делегированием
 
Пытаюсь заставить работать плагин iCheck на контент подгруженный через AJAX (вначале загружается вся страница и сразу же document ready идет второй запрос через AJAX).

Есть такое

<div id="ajax_result"></div>


Гружу в него такое (много чекбоксов)

<input type="checkbox" class="minimal" value="on" checked=""  />
...
<input type="checkbox" class="minimal" value="on" checked=""  />


Если контент загружается сразу (есть в DOM), то проблем подключить плагин не составляет (естественно jquery присутствует, подключаем плагин и инициализируем его) - так все работает.
<script src="plugins/iCheck/icheck.min.js"></script>
    <script>
        //iCheck for checkbox and radio inputs
        $('input[type="checkbox"].minimal').iCheck({
          checkboxClass: 'icheckbox_minimal-blue',
          radioClass: 'iradio_minimal-blue'
        });
    </script>


На AJAX контенте, пока не получается. Накодил такого
$('#ajax_result').on('ajax_result', 'input[type="checkbox"].minimal', iCheck({
          checkboxClass: 'icheckbox_minimal-blue',
          radioClass: 'iradio_minimal-blue'
        })
);
$('#ajax_result').triggerHandler('ajax_result');

и подключил
<script src="plugins/iCheck/icheck.min.js"></script>
    <script src="client/search/init_icheck.js"></script>


Т.е. сделал свое событие ajax_result

В консоли ошибка "ReferenceError: iCheck is not defined"
Подозреваю, что чето не правильно сделал.
Помогите пжлст.

Gurylyov 17.01.2016 18:39

Думаю, дело в том, что ты вызвал iCheck как обычную функцию, а это jQuery функция, которая должна вызываться на DOM-элементе.
т.е. должно быть по идее что-то вроде этого
$('#ajax_result').on('ajax_result', 'input[type="checkbox"].minimal', function() {
    $(this).iCheck({
        checkboxClass: 'icheckbox_minimal-blue',
        radioClass: 'iradio_minimal-blue'
    });
);


ещё как вариант, можно следить за появлением новых инпутов
$(document).on('change','input[type="checkbox"].minimal', function(){
    $(this).iCheck({
        checkboxClass: 'icheckbox_minimal-blue',
        radioClass: 'iradio_minimal-blue'
    });
});

razorg1991 17.01.2016 20:50

Цитата:

Сообщение от Gurylyov
Думаю, дело в том, что ты вызвал iCheck как обычную функцию, а это jQuery функция, которая должна вызываться на DOM-элементе.

Сам думал в эту сторону, направление верное.
Короче чтобы не тянуть кота за я... :) Решил проблему, может кому пригодиться.
В скрипт ajax (конкретно я запихнул следующий код в success после выполнения всей функции по success), запихиваем следующее

// создаем событие успешного request
$('#ajax_result').trigger('requestsuccess');


Т.е. тупо вручную создаем событие.
А дальше в самом скрипте инициализации плагина, ловим это событие

$('#ajax_result').bind('requestsuccess', function() {

    $('input[type="checkbox"].minimal').iCheck({
          checkboxClass: 'icheckbox_minimal-blue'
        });        
});


Это решение справедливо для любого плагина или просто самописного скрипта :)

рони 17.01.2016 21:58

razorg1991,
зачем тригер то, если можно сразу
success:  function() {

    $('input[type="checkbox"].minimal').iCheck({
          checkboxClass: 'icheckbox_minimal-blue'
        });
}

razorg1991 17.01.2016 23:14

Цитата:

Сообщение от рони
зачем тригер то, если можно сразу

Ну можно и так. Я просто люблю разносить все по разным местам :)


Часовой пояс GMT +3, время: 18:06.