0

我有一个输入元素和它旁边的链接。用户在输入中输入一些文本，然后单击链接进行查询以查找与他输入的内容相关的内容。结果应使用 fancybox 显示。这是我的js代码：

$(".srcaut").click(function() { 
        if($(this).prev("input").val() == '') {
            alert('Empty field');
            return false;
        }

        srch = $(this).attr("id").replace("srch-",'');

        $(this).attr('href',Url+'/'+srch+'/'+$(this).prev("input").val());
        $(this).fancybox();

    }).prev("input").keypress(function(even) {
         if(even.keyCode == 13) {
            $(this).next('.srcaut').click();
            return false;
        }

});

但是当用户第一次输入一些文本并单击链接或在页面加载后按“Enter”键时，fancybox 不会显示。但在那之后是作品。

问题是什么。似乎fancybox第一次没有绑定链接，但为什么呢？

4

3 回答 3

4

调用.fancybox()链接不会显示花式框，它只会准备链接以在单击时显示花式框。这就是为什么它只在第二次起作用的原因，因为在click处理程序中准备了精美的盒子。

您可能必须.fancybox()在加载文档时调用您的链接，但这引发了一个问题，即让它与基于input' 的内容动态构建的链接一起工作。您可能想尝试在blur您的input.

如何防止在链接的点击事件内的 if 条件下显示它？

在调用之前.fancybox()，您可以注册一个处理程序，如果为空，click将停止事件传播，请参见http://jsbin.com/exomad/3中的示例input

于 2013-03-06T08:10:09.240 回答
1

我正在为面临类似问题的其他人发布此内容..

就我而言，我有

$('#addvideos').on("click",function(){
    $(".modal").fancybox(fancybox_default);
});

fancybox_default <-- 存储花式框配置 {height,width}

addvideos <-- 指向一个 url 元素

所以在我的情况下，当我点击 url 时配置不会第一次加载，但之后就可以工作了。（我的意思是它可以工作（它显示弹出窗口）但它不会加载弹出窗口的高度和宽度）

我不得不添加 var垃圾 = $(".modal").fancybox(fancybox_default); <-- 在 on click 处理程序之前... // 只需加载一次并将其保存在变量中...

它对我有用:-)

于 2013-12-05T06:36:29.277 回答
0

我能够通过在为动态生成的锚标记绑定点击事件之前初始化fancybox来解决这个问题（我想即使你在调用之前初始化它也可以工作）

 $('#a_email' + resultId).fancybox({
                    //jq('#a_email' + resultId).fancybox({               
                    'width': '45%',
                    'height': '55%',
                    'autoScale': true,
                    'scrolling': 'no',
                    'transitionIn': 'fade',
                    'transitionOut': 'fade',
                    'type': 'iframe'
                });

然后直接调用fancybox

$.fancybox({                        
                        'width': '45%',
                        'height': '55%',
                        'autoScale': true,
                        'scrolling': 'no',
                        'transitionIn': 'fade',
                        'transitionOut': 'fade',
                        'type': 'iframe',
                        'href': url
                    });

有什么想法吗？

于 2014-03-05T10:57:05.517 回答