3

我正在尝试实现一个奇特的 Yes No 确认，但我在让回调根据需要工作时遇到问题。下面的示例使用Fancybox v2。

下面代码的问题是，当HREF单击“测试”时正在调用函数“do_something”，而在用户单击时未调用函数“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')”将被执行，并且返回的结果将作为第二个参数传递给“fancyConfirm”方法。这就是为什么您的参数“回调”总是“未定义”的原因。

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

我会在链接上绑定一个单击事件并在用户单击其中一个按钮时调用回调，例如 - 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例子

感谢Francisco Diaz在Google Groups FancyBox 论坛上的帖子为我指明了正确的方向。

更新：

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