Question

我有一个令人费解的难题：

我有这个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，但它不起作用。我的问题是为什么，是否有一个已知的解决方法？

Answer 1

使用.on()或.live()代替.click()，具体取决于jQuery版本。

关于此jquery .live('click') vs .click()

的更多信息

修改

Answer 2

让我回答原因。

当您使用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");
});

JS没有代理.load（） - ed html

2 个答案: