3

派手なYes No確認を実装しようとしていますが、必要に応じてコールバックを機能させるのに問題があります。以下の例はFancybox v2を使用しています。

以下のコードの問題は、HREF「テスト」がクリックされたときに関数「do_something」が呼び出され、ユーザーがクリックしたときに呼び出されないこと#fancyConfirm_okです。

function fancyConfirm(msg,callback) {
    var ret;
    jQuery.fancybox({
        'modal' : true,
        'content' : "<div style=\"margin:1px;width:240px;\">"+msg+"<div style=\"text-align:right;margin-top:10px;\"><input id=\"fancyconfirm_cancel\" style=\"margin:3px;padding:0px;\" type=\"button\" value=\"Cancel\"><input id=\"fancyConfirm_ok\" style=\"margin:3px;padding:0px;\" type=\"button\" value=\"Ok\"></div></div>",
        'afterShow' : function() {
            jQuery("#fancyconfirm_cancel").click(function() {
                ret = false;
                //jQuery.fancybox.close();
                $.fancybox.close();
            })
            jQuery("#fancyConfirm_ok").click(function() {
                ret = true;
                jQuery.fancybox.close();
            })
        },
        'afterClose' : function() { 
            if (typeof callback == 'function'){ 
                callback.call(this, ret); 
            } else {
                var callback_type = typeof callback;
                alert(callback_type);
            }
        }
    });
}
<a href="#" onclick="fancyConfirm('Are you sure you want to delete?',  do_something('a', 'b') );return false;">Test</a>
4

2 に答える 2

11

メソッド「do_something('a', 'b')」は、ユーザーがリンクをクリックするたびに実行され、返された結果が 2 番目のパラメーターとして「fancyConfirm」メソッドに渡されます。これが、パラメータ「コールバック」が常に「未定義」である理由です。

fancyBox にも問題があります。「afterClose」コールバックが開く前と閉じた後に 2 回呼び出されます (これは次のリリースで変更されます)。

リンクにクリック イベントをバインドし、ユーザーがボタンの 1 つをクリックすると、 http://jsfiddle.net/xcJFY/1/のようにコールバックを呼び出します。

于 2012-05-04T17:56:02.923 に答える
2

二重コールバック メソッドの大ファンではありません (申し訳ありません Janis )。

したがって、これに対する解決策を見つけようとしているときに、自分で同様のコードを試してみたところ、戻り値が関数のスコープ内で定義されていない限り、正常に機能することがわかりました。戻り値が関数内で定義されていると、奇妙になります一時的に動作し、その後未定義に戻る動作。

事実上、戻り値は関数、グローバル、クロージャーなどの範囲外である必要があります。

$(document).ready(function() {
    $(".fancybox").on("click", function(e){   
        e.preventDefault();
        confirm("Do you wish to continue?", true, function(resp) {
            alert("You clicked " + resp);
        });
    });
});

function confirm(msg, modal, callback) {
    $.fancybox("#confirm",{
        modal: modal,
        beforeShow: function() {
            $(".title").html(msg);
        },
        afterShow: function() {
            $(".confirm").on("click", function(event){
                if($(event.target).is(".yes")){
                    ret = true;
                } else if ($(event.target).is(".no")){
                    ret = false;
                }
                $.fancybox.close();
            });
        },
        afterClose: function() {
            callback.call(this, ret);
        }
    });  
}

ここにjsfiddle例があります

Google グループの FancyBox フォーラムに投稿したFrancisco Diazに感謝します。

アップデート：

動的に構築されたボタンとカスタムの戻り値を使用するように私の例を拡張したので、true と false だけに限定されることはありません。

$(document).ready(function() {
    $(".fancybox").on("click", function(e){   
        e.preventDefault();
        confirm("Do you wish to continue?", {
                /* 
                Define your buttons here, can handle multiple buttons 
                with custom title and values
                */
                buttons: [
                    { class: "yes", type: "button", title: "Yes", value: "yes" },
                    { class: "no", type: "button", title: "No", value: "no" },
                    { class: "maybe", type: "button", title: "Maybe?", value: "maybe" }
                ],
                modal: true
            }, 
            function(resp) {
                alert("You clicked " + resp);
            }
        );
    });
});

function confirm(msg, options, callback) {
    $.fancybox("#confirm",{
        modal: options.modal,
        beforeShow: function() {
            this.content.prepend("<p class=\"title\"></p>");
            $(".title").html(msg);

            for (i = 0; i < options.buttons.length; i++) {
                this.content.append($("<input>", { 
                    type: "button", class: "confirm " + options.buttons[i].class, 
                    value: options.buttons[i].title
                  }).data("index", i));
            }
        },
        afterShow: function() {
            $(".confirm").on("click", function(event){
                ret = options.buttons[$(event.target).data("index")].value;
                $.fancybox.close();
            });
        },
        afterClose: function() {
            this.content.html("");
            callback.call(this, ret);
        }
    });
}

jsfiddle例を追加

于 2013-10-29T13:46:31.597 に答える