JavaScript 双击元素

Question

嘿伙计们..快速提问:

我编写了一个简单的 JS，当单击图像链接时，它会打开 lightBox 以查看图像。基本上，使用 jQuery(是的，我就是那么懒)，我检测 anchor 标记的点击，使用正则表达式来确保 HREF 属性是图像文件，如果是，它会在 lightBox 中打开图像。一切正常，除了一件事: anchor 需要单击两次才能打开 lightBox。这是为什么？

这是我写的脚本:

    $(document).ready(function(){
    var href;
    var imageExtensions = /(.)+(.jpg)|(.png)|(.gif)|(.bmp)/;
    //On click of any link
    $("a").live("click",function(event){
        href = $(this).attr("href");
        //If the target URL is an image, use lightbox to open it
            if(imageExtensions.test(href)){
                event.preventDefault();
                $(this).attr("class","lightboxIMG");
                //Prevent the link from opening, and open lightbox
                $(".lightboxIMG").lightBox();
                $(this).attr("class","");
            }
    });
//END   
});

我不明白是什么导致用户必须单击两次才能激活 lightBox。如果您需要示例来了解我所指的内容，我目前正在我的新网站的测试版中使用该脚本:http://ctrlshiftcreate.com/photography.php?photo=6&r_folder=

点击“查看完整尺寸”即可明白我的意思。我非常感谢任何帮助 - 非常感谢!

Answer 1

我认为发生的情况是 lightbox() 调用仅将 anchor 设置为灯箱，它实际上并不显示灯箱。因此，第一次点击是对灯箱说“使其成为灯箱链接”，第二次点击被灯箱捕获并实际显示灯箱。

编辑现场直播重要吗？或者，您是否计划添加更多在加载文档后需要捕获的链接？如果实时不重要，标准 lightBox() 方法应该足以捕获点击。如果是，我会考虑编写一个 hookAnchors() 样式方法，您可以在只需再次调用 lightBox() 的 ajax 之后调用该方法。像这样的东西:

$(document).ready(function() {
    hookAchors();
});

function hookAnchors() {
    var imageExtensions = /(.)+(.jpg)|(.png)|(.gif)|(.bmp)/;
    $('a')
        .filter(function() {
            return imageExtensions.test($(this).attr("href"))
        })
        .lightBox();
}

这样你就可以在 DOM 更改代码中调用 hookAnchors(例如 $.get 的结果)。