0

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

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

4

2 回答 2

1

使用.on()or.live()而不是.click()取决于 jQuery 版本。

编辑：更多关于这个jquery .live('click') vs .click()

于 2013-02-28T11:08:25.107 回答
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");
});
于 2013-02-28T11:21:06.883 回答