添加onclick事件动态生成元素jquery

Question

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

我使用下面的代码：

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

当我萤火虫它，我得到sliderimage不是一个函数。当我在追加后使用onclick事件时，我只得到第一个图像，但有多个图像。我希望onclick能够点击任何图像。如何去做呢？

感谢，

Answer 1

id="citythumb"必须是唯一的，使用class，像class="citythumb"

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

当你改变id属性，你也可以用.citythumb

Answer 2

尝试事件委托的方式代替img在这儿，在事件中与元素祖先相关联。

这样做的，因为起泡效果click事件会在这种情况下，相关的图像元素等等......

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

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

所以不是ID = “citythumb” 的声明类= “citythumb”

Answer 3

请移动sliderimage（）函数调用Ajax之外

$.ajax({ 
}); 

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