Question

所以我试图创建一个动态图库。创建的每个图像都有一个顶部div，供用户点击。我无法将点击事件绑定到div

守则

$(document).ready(function()
{
    if()
    {

    }
    else
    {
        var divImgContainer =  '<div id="imgContainer">';
        var divInfo         = '<div id="info">';
        var divDetails      = '<div id="details">';
        var divImage        = '<div id="image">';
        var divVote         = '<div id ="click">';
        for(i=0; i<$ImageArray.length; i++)
        {
             document.getElementById("container").innerHTML += divImgContainer+divInfo+divDetails+'Caption</div>'+divVote+'</div></div>'+divImage+'<a href="img/'+$ImageArray[i].link +'"><img src="'+$ImageArray[i].thumb+'" /></a></div></div>';
         }
        $('#click').click(function()
        {
            alert("click");
        });
    }
});

谷歌搜索提供了两个流行的答案，一个是$('#click').click(function()，另一个是$('#click').live(click,function()，这两个都不起作用。

是否有任何特定方法可以为动态生成的div绑定点击事件？

Answer 1

首先，不要创建具有相同ID的多个div

假设元素ID'click'具有类'vote'，并且您想要点击任何具有'vote'类的div，请尝试：

$('#container').on('click', '.vote', function(e){
    alert("click");
});

Answer 2

首先，jQuery 1.7中不推荐使用.live()方法，在jQuery 1.9中删除它，你不应该使用它。

您正在使用JavaScript创建元素，但是您在页面加载时以及在（尝试）绑定事件处理程序之前执行此操作，因此这不应该是一个问题。

然而，问题可能在于您正在执行此操作：

... + divVote+'</div>...

这会打开<div id="click">元素，然后立即结束它，因此它似乎没有任何内容。如果它没有内容，那么你实际上很难点击它。

Answer 3

放

$('#click').click(function(){
     alert("click");
});

以外的

$(document).ready(function(){   });

如果不起作用，请尝试

$('#click').live(click,function()

它可能对你有帮助

将Click事件绑定到动态生成的div

3 个答案: