Как добавить событие onclick в динамически генерируемый div

Question

У меня есть количество div в моем HTML-файле, которые генерируются динамически.Когда я добавляю div s, я хочу добавить событие onclick к каждому div.

Каждый div имеет динамический id.Используя id, как можно добавить обработчик onclick?

Код, который генерирует div s:

function createSlider(resp) {
    $.each(resp, function(key, val) {
        var item = "<div class='item' id="+val.id+">";

        item += "<h2>" + val.category + "</h2>";
        item += "<img src=" + val.image + " alt=" + val.title + ">";
        item += "</div>";

        $(".content-conveyor").append(item);
    });
}

Answer 1

Вы можете применить функцию щелчка к идентификатору после добавления его в DOM.Итак, после вашей строки $(".content-conveyor").append(item); добавьте:

$('#' + val.id).click(function() {
// Do stuff on click
});

Редактировать: Подумав об этом больше и обдумав ответ @ Nemoden, вы также можете сделать это следующим образом:

function createSlider(resp) {
    $.each(resp, function(key, val) {
        var item = "<div class='item' id="+val.id+">";

        item += "<h2>" + val.category + "</h2>";
        item += "<img src=" + val.image + " alt=" + val.title + ">";
        item += "</div>";
        var $item = $(item).click(function() {
            // Add on click code here
        });
        $(".content-conveyor").append($item);
    });
}

Это добавит обратный вызов клика без использования идентификатора вообще.

Answer 2

.live () используется для подключения обработчиков к элементам DOM, которые могут еще не существовать в DOM. После $(".content-conveyor").append($item); добавить следующий код.

 $('#' + val.id).live(click,function() {
 // your code here
 });

Answer 3

Вы можете использовать имя класса div для обработчика событий на всех элементах, которые соответствуют этому имени класса.

$(".item").click(function() {
    //
 });