Javascript 双击元素

Question

嘿伙计们.. 快速提问:

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

这是我写的脚本:

    $(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 设置为灯箱，实际上并未显示灯箱。因此，第一次点击是对灯箱说“将此设为灯箱链接”，第二次点击被灯箱捕获并实际显示灯箱。

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

$(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 的结果)。