Question

我的HTML文件中有一些动态生成的div个。{当我添加div时，我想向每个onclick添加div个事件。

每个div都有一个动态id。使用id，如何添加onclick处理程序？

生成div的代码：

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后，可以将点击功能应用于ID。因此，在$(".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);
    });
}

这将附加点击回调，而不必使用ID。

Answer 2

您可以在与该类名匹配的所有元素上使用div的类名作为事件处理程序。

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

Answer 3

.live（）用于将处理程序附加到DOM中可能尚不存在的DOM元素。在$(".content-conveyor").append($item);添加以下代码后。

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

如何将onclick事件添加到动态生成的div中

3 个答案: