Question

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

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

注意：#slideshow div中的所有内容都是由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 */

任何回复都会非常感谢，因为我已经花了几个小时。

Answer 1

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

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

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

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

Answer 2

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; 
});

jQuery与Fancybox动态创建的元素。仅适用于第二次单击而不适用于第一次

2 个答案: