Question

我正在尝试实现一种幻想是没有确认，我在回调根据需要工作时遇到了问题。以下示例使用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>

Answer 1

只要用户点击链接，您的方法就会执行“do_something（'a'，'b'）”，返回的结果将作为第二个参数传递给“fancyConfirm”方法。这就是您的参数“回调”始终是“未定义”的原因。

fancyBox也存在问题 - “afterClose”回调被调用两次 - 在打开之前和关闭之后（这将在下一个版本中更改）。

我会在链接上绑定点击事件，并在用户点击其中一个按钮时调用回调，例如 - http://jsfiddle.net/xcJFY/1/

Answer 2

不是双回调方法的忠实粉丝（Sorry 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 示例

感谢Francisco Diaz post Google Groups FancyBox forum jsfiddle指出了我正确的方向。

<强>更新

现在扩展我的示例以使用动态构建的按钮和自定义返回值，因此您不仅限于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);
        }
    });
}

添加了 {{3}} 示例

Fancybox的Javascript / Jquery回调是否确认

2 个答案: