将onclick事件添加到动态生成的元素jquery数组中

时间:2012-10-03 07:56:54

标签: jquery

我在弹出窗口的左侧有一个动态生成的缩略图图像,点击图像后我希望该图像显示在右侧。

我使用以下代码:

    $.ajax({  
                    type: "POST",
                    url:  "/buildyourholiday/placeimages",
                    data: "srcid="+cityid,
                    success: function(data){
                        var objsrc = jQuery.parseJSON(data);
                        var src="";
                        $(".photoright").append().empty();
                        $.each(objsrc, function(index, obsrc){
                            src += '<ul>'+
                                '<li><a href="#"><img id="citythumb" onclick="sliderimage(this)" src="/images/city/thumbs/'+obsrc.img_filename+'" width="100" height="100"></a></li>'+
                                '</ul>';
                        });
                        $(".photoright").append(src);
                        function sliderimage(image)
{
    alert("sdf");
    alert(image);
}
                    }
                });

当我发出嘘声时,我得到的幻灯片不是一个功能。当我在追加后使用onclick事件时我只得到第一张图片,但是有多张图片。我希望onclick能够处理任何图像的点击。怎么去呢?

谢谢,

3 个答案:

答案 0 :(得分:1)

id="citythumb"必须是唯一的,请使用class,例如class="citythumb"

$(".photoright").on('click', 'img', function(e){
   e.preventDefault(); // for link
   alert(this);
});

当您更改id属性时,您也可以将img替换为.citythumb

答案 1 :(得分:0)

尝试事件委派方法,其中事件与元素祖先相关联。

由于冒泡效应,在这种情况下,click事件将与图像元素相关联...

$(".photoright").on('click', 'img', function(){
   alert(this);
});

确保文档中的ID是唯一的。

因此,而不是 id =“citythumb”声明 class =“citythumb”

答案 2 :(得分:0)

请将sliderimage()函数移到Ajax调用之外

 $.ajax({  
 });

 function sliderimage(image){     
   alert("sdf");
   alert(image);
 }