图像需要2次点击才能触发点击事件

Question

我使用Wordpress插件创建了一个图库。单击图像时，它会创建模态效果。我需要为该图像指定一个链接，以便在点击时访问外部页面，但是我需要单击图像两次，第一种类似于关注图像（在第一次点击之前没有指针）。 $（document）.click（function（）的原因是检查用户是否点击了页面中的任何位置（以启动模态）。

if ($("body").hasClass("page-id-2757") || $("body").hasClass("page-id-2752")) {
    $(document).click(function () {
        var imageLink = $("img[src='https://lacostadelalgodon.com/wp-content/uploads/2017/05/01-la-costa-del-algodon-1.jpg']");
        imageLink.css("cursor", "pointer");
        imageLink.on("click", function () {
            window.open("http://www.vogue.com/article/this-spanish-label-makes-our-sleepwear-as-daywear-dreams-come-true");
        })
    })

Answer 1

您将事件处理程序附加到另一个单击处理程序因此，它在第二次点击

删除document点击处理程序

if ($("body").hasClass("page-id-2757") || $("body").hasClass("page-id-2752")) {
    var imageLink = $("img[src='https://lacostadelalgodon.com/wp-content/uploads/2017/05/01-la-costa-del-algodon-1.jpg']");
    imageLink.css("cursor", "pointer");
    imageLink.on("click", function () {
        window.open("http://www.vogue.com/article/this-spanish-label-makes-our-sleepwear-as-daywear-dreams-come-true");
    });
}

使用Event Delegation方法

$("body.page-id-2757,body.page-id-2752").on('click', "img[src='https://lacostadelalgodon.com/wp-content/uploads/2017/05/01-la-costa-del-algodon-1.jpg']", function(){
    window.open("http://www.vogue.com/article/this-spanish-label-makes-our-sleepwear-as-daywear-dreams-come-true");
});