我有一个令人费解的难题:
我有这个JS: 编辑更新了JS
$(".img-thumb").on("click", function(){ // exhibiting the same behaviour as .click()
thumbID = $(this).attr("id");
console.log(thumbID);
$(".gal-act").removeClass("gal-act");
$(this).addClass("gal-act"); // as suggested below
});
这意味着使用.load()jquery函数对插入页面的html进行操作。难题是当它显示为原始文件时它在html上工作(如:http://keithneilson.co.uk/experimental/products/Data/prod-data.html,是的,我知道有图像丢失,没有人打算单独看这个页面)。正如您从该链接中看到的那样,代码只是为了更改缩略图的左边框以指示当前选择的内容,一旦我解决了这个难题,我将添加其他功能。
以下是在最后一页中插入弹出窗口的相同html(点击幻灯片下方的红色框):http://keithneilson.co.uk/experimental/products/。正如您所看到的,图像现在可以正常工作,但是如果再次单击缩略图,您将看到脚本没有动作(也没有日志输出)。
现在,它是相同的HTML,和相同的JavaScript,但它不起作用。我的问题是为什么,是否有一个已知的解决方法?
答案 0 :(得分:1)
答案 1 :(得分:1)
让我回答原因。
当您使用click函数绑定事件时,它仅将click事件绑定到DOM中当前存在的元素上,因此当ciick事件被注册时,您的html不存在于DOM中,因为它稍后加载。所以事件没有被绑定到你的元素。
尝试@hexblot提供的建议。
更新:
$('body').on('click', '.img-thumb', function(){
thumbID = $(this).attr("id");
console.log(thumbID);
$(".gal-act").removeClass("gal-act");
$("#"+thumbID).addClass("gal-act");
});