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

私の問題は、リンクを 2 回クリックした場合にのみ機能すること<a href="http://localhost/test.php">Fancybox here</a>です。

初めてリンクをクリックするとtriggered click!、コンソールにログが記録されますが、GETリクエストはありません。次に、2回目にクリックすると機能します！

コンソール：

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

グレッグ・ペティットのコメントと回答は、私に別の方法でそれを行う方法のアイデアを与えてくれました。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 に答える
1

コメント欄の質問への回答として：

問題がリンクがたどられていることである場合は、デフォルトの動作を防止する必要があります。

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

必要に応じて、関数の最後で使用することもできreturn false;ます。これにより、デフォルトの動作が防止され、伝播が停止します。

于 2012-07-09T04:13:58.780 に答える