我在弹出窗口的左侧有一个动态生成的缩略图图像,点击图像后我希望该图像显示在右侧。
我使用以下代码:
$.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能够处理任何图像的点击。怎么去呢?
谢谢,
答案 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);
}