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

我在我的HTML文件中有多个div s是动态生成的。当我添加div时，我想为每个div添加一个onclick事件。如何将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); 
    }); 
}

来源

2011-12-03 Romi

你把它添加到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。

来源

2011-12-03 05:52:59

希望'val.id'是一个独特的价值。 –

这是根据OP的代码作出的假设。他们将这个值分配给他们新的div的ID，所以我认为这是一个安全的假设。 –

这不是对答案的批评（这是我的投票），只是评论/沉默。 –

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

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

来源

2011-12-03 05:55:05 alwynd

.live（）用来处理附加到可能不会在DOM尚未存在的DOM元素。经过$(".content-conveyor").append($item);添加以下代码。

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

来源

2011-12-03 06:13:26

如果你停下来思考'.live（）'以及它的使用方式，在这种情况下使用'id'选择器并没有什么意义 –

也许'$（ '.content-conveyor div'）。live（...'会更好，但取决于用户的代码。 –

.live（）现在已被弃用并从jQuery 1.9中删除：http://jquery.com/upgrade -guide/1.9 /＃活移除 – dantiston

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

回答

相关问题