我有一个输入元素和旁边的链接。用户在输入中输入一些文本并单击链接进行查询以查找与其输入内容相关的内容。结果应使用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;
}
});
但是第一次用户输入一些文字并点击链接或点击“输入”时,fancybox不会显示。页面加载后的键。但在那之后是有效的。
问题是什么似乎fancybox在第一次没有链接到链接,但为什么?
答案 0 :(得分:4)
在链接上调用.fancybox()
不会显示花哨的框,它只会准备链接,以便在点击时显示精美的框。这就是为什么它只能在click
处理程序中准备好花式框时第二次工作的原因。
在加载文档时,您可能不得不在链接上调用.fancybox()
,但这就提出了使用基于input
动态构建的链接的问题。内容。您可能想尝试在blur
的{{1}}事件上构建链接。
如何防止在点击内的if条件中显示它 链接事件?
在致电input
之前,如果.fancybox()
为空,您可以注册一个click
处理程序stop event propagation,请参阅http://jsbin.com/exomad/3上的示例
答案 1 :(得分:1)
我正在为面临类似问题的其他人发布此内容。
在我的情况下,我有
$('#addvideos').on("click",function(){
$(".modal").fancybox(fancybox_default);
});
fancybox_default< - 存储花式框配置{height,width}
所以在我的情况下,配置在我点击网址时第一次不会加载但在此之后工作。 (我的意思是它工作(它显示弹出窗口),但它不会加载弹出窗口的高度和宽度)
我不得不添加var trash = $(“。modal”)。fancybox(fancybox_default); < - 在点击处理程序之前... //只需加载那个东西并将其保存在变量中......
它对我有用: - )
答案 2 :(得分:0)
我能够通过在为动态生成的锚标记绑定click事件之前初始化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
});
有什么想法吗?