1

我正在使用 Fancybox 和幻灯片。我有一个“动态”从数据库加载项目的幻灯片。

<div id="#slideshow">
    <div id="#slide-description">
        <a href="http://localhost/test.php">Fancybox here</a>
    </div>
</div>

注意：#slideshowdiv 中的所有内容都是由 jQuery 动态生成的。

我的 javascript 看起来像这样：

$("#slide-description").on('click', 'a', function() {
    console.log('triggerd click!');
    $(this).fancybox({
        type: "ajax",
        ajax: {
            dataFilter: function(data) {                
                return $(data).find("#portfolio-info");
            }
        },
        onComplete: function(){
            console.log('done.');
        }
    });
    return false; 
});

我的问题是它仅在我单击链接两次时才有效 - <a href="http://localhost/test.php">Fancybox here</a>。

当我第一次单击链接时，triggered click!已登录控制台但没有GET请求。然后当我第二次点击它时，它就起作用了！

安慰：

triggerd click! /* 1st click */
GET http://localhost:8888/raydar/portfolio/frucor-1/ 200 OK /* 2nd click */
triggerd click! /* 2nd click */
done. /* 2nd click */

任何答复将不胜感激，因为我已经花了几个小时。

4

2 回答 2

1

作为对评论部分问题的回复：

如果问题是正在跟踪链接，则需要防止默认行为：

$("#slideshow").on('click', 'a', function(e) {
  e.preventDefault();
  /* the rest */
});

请注意，您也可以return false;在函数末尾使用，这可以防止默认行为并停止传播，如果您需要的话。

于 2012-07-09T04:13:58.780 回答
1

Greg Pettit 的评论和回答让我知道如何以另一种方式做到这一点。我重新阅读了 Fancybox 的文档，发现对于 Ajax 请求，有一个url选项。

来自http://fancybox.net/blog：

$("#login_form").bind("submit", function() {

    if ($("#login_name").val().length < 1 || $("#login_pass").val().length < 1) {
        $("#login_error").show();
        $.fancybox.resize();
        return false;
    }

    $.fancybox.showActivity();

    $.ajax({
        type        : "POST",
        cache   : false,
        url     : "/data/login.php", /*i'm talking about this*/
        data        : $(this).serializeArray(),
        success: function(data) {
            $.fancybox(data);
        }
    });

    return false;
});

有了这个，我想出了这个：

$("#slideshow").on('click','#slide-description a', function() {
    $.fancybox({
        type: "ajax",
        ajax: {
            type: "GET",
            url: $(this).attr("href"), /*we get the URL from "#slide-description a" and load it*/
            dataFilter: function(data) {                
                return $(data).find("#portfolio-info");
            }
        },
        onComplete: function(){
            console.log('done.');
        }
    });
    return false; 
});
于 2012-07-09T04:59:49.663 回答