JQuery: событие Click не работает после добавления. (Не знаю, как использовать .ON)

У меня есть 2 события click. Один добавляет IMG, который включает другое событие click. Это не работает. Я знаю, что мне нужно использовать jQuery.ON, но я просто не могу понять, как и где.

Мой код:

$( document ).ready(function() {
    // The one below (.choimh) isn't triggered anymore
    $('.choimg').click(function(){

    });

    // Switch to chosen color
    $('.color').click(function(){
        $(".thumbs").append('<a href="#"><img id="image'+u+'" class="choimg" src="/img/products/mini/'+colnumber+'-'+ i + '.jpg" />');
    });
});

..color div находится в совершенно другом месте, чем .choimg.

Я просто не могу понять, как использовать .ON.

ОТВЕТЫ

Ответ 1

Раньше это были функции live или delegate, которые делали подобные вещи. Теперь вы можете сделать это следующим образом:

$(document).on('click', '.choimg', function(e) {

//do whatever

});

Ответ 2

jQuery в делает много, но для вашего конкретного случая вы хотите поместить "on" на объект DOM, который не загружен после загрузки DOM. Это позволяет событию пузыриться до этого объекта DOM, который затем, в свою очередь, делегирует событие соответствующему элементу DOM на основе второго селектора, который вы предоставляете.

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

Обработчики событий привязаны только к выбранным в данный момент элементам; Oни должен существовать на странице в момент, когда ваш код выполняет вызов .on(). Чтобы убедиться, что элементы присутствуют и могут быть выбраны, выполните событие привязка внутри готового документа документа для элементов, находящихся в HTML-разметка на странице. Если на страницу вводится новый HTML-код, выберите элементы и присоедините обработчики событий после того, как новый HTML помещен на страницу. Или используйте делегированные события для присоединения события обработчик, как описано ниже.

В любом случае вам нужно связать с уже существующей вещью и предоставить второй селектор для вещи, которая будет добавлена ​​к тому, что вы хотите иметь фактическое событие, а также событие и функциональность. Что-то вроде этого...

$('#selector-to-thing-that-exists').on('click', '.thing-that-will-be-added-later', function() {
  alert('Do stuff here!');
});

Обратите внимание, что важно, чтобы "вещь, которая существует" настолько низок, что вы можете получить ее в DOM для повышения эффективности. Например, не рекомендуется устанавливать селектор на "тело" или на уровне документа. Помните об этом.

Надеюсь, это даст немного лучшее понимание того, что вы хотите сделать. Я настоятельно рекомендую вам прочитать документацию jQuery, поскольку это очень хорошо.

Ответ 3

Вы должны использовать что-то вроде:

$(document).on("click", ".color", function() {
//append code here
});

Общий прототип on(eventType, selector, function), вы можете использовать и другие события.

Подробнее см. .