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

我的HTML文件中有许多动态生成的

div

s。当我添加

div

s时，我想向每个

div

添加一个

onclick

事件

每个

div

都有一个动态

id

。使用

id

，如何添加

onclick

处理程序

生成divs的代码：

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);
    });
}

函数createSlider（resp）{
$。每个（响应、功能（键、值）{
var项目=”；
项目+=“”+val.category+“”；
项目+=“”；
项目+=“”；
$（“.content converter”）。追加（项目）；
});
}

将ID附加到dom后，可以对ID应用单击功能。因此，在您的

$（“.content converter”）.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);
    });
}

函数createSlider（resp）{
$。每个（响应、功能（键、值）{
var项目=”；
项目+=“”+val.category+“”；
项目+=“”；
项目+=“”；
var$item=$（item）。单击（函数（）{
//单击此处添加代码
});
$（“.content converter”）。追加（$item）；
});
}

这将附加click回调，而不必使用ID。
您可以在与该类名匹配的所有元素上使用div的类名作为事件处理程序

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

.live（）用于将处理程序附加到DOM中可能还不存在的DOM元素。
在<代码>$（“.content transfer”）.之后追加（$item）添加以下代码

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

这是根据OP的代码做出的假设。他们将该值分配给新部门的ID，因此我认为这是一个安全的假设。这不是对答案的批评（这是我的投票），只是评论/沉思。@JaredFarrish:谢谢！编辑后的代码也是如此。编辑击败了我。太糟糕了@Nemoden可能没有看到它。谢谢你的代码，如果我想在div中的图像上点击事件，该怎么办如果你停下来想想
.live（）
，以及它的使用方法，在这种情况下使用
id
选择器没有多大意义。也许
$（'.content-converter-div'））.live（…
会更好，但这取决于用户的代码。.live（）现在已被弃用，并从jQuery 1.9开始删除：