javascript - 单击链接两次(而不是一次)时会激活灯箱

Question

我遇到了一个奇怪的问题，我必须点击链接(按钮)两次而不是一次才能激活灯箱事件，并且我一生都无法弄清楚为什么。

这是我的代码，这是页面的预览，如果您注意到，您必须单击 watch 按钮两次才能激活灯箱事件。

(链接已删除，因此 Google 不会编制索引)

<script type="text/javascript">
    var $j = jQuery.noConflict();
    var src = '';

    $j(function()
    {
        $j("span#btnclick").click(function(event)
        {
            event.preventDefault();

            $j("a.watchbutton").nivoLightbox({
                effect: 'fade',
                afterShowLightbox: function()
                {
                    src = $j('.nivo-lightbox-content > iframe').attr('src');
                    $j('.nivo-lightbox-content > iframe').attr('src', src  +'?autoplay=1');
                }
            });
        });
    });
    </script>

Answer 1

这是因为您正在 click 事件中定义灯箱功能。因此，当您第一次单击时，灯箱功能就已定义。第二次被重新定义，但在它工作之前，因为它已经被定义了。

解决方案是从click事件中提取灯箱功能定义:

$j("span#btnclick").click(function(event){
    event.preventDefault();
});

$j("a.watchbutton").nivoLightbox({
    effect: 'fade',
    afterShowLightbox: function()
    {
        src = $j('.nivo-lightbox-content > iframe').attr('src');
        $j('.nivo-lightbox-content > iframe').attr('src', src  +'?autoplay=1');
    }
});