Question

我正在尝试创建一个对话框，将对象参数中的每个键作为输入。

function dialog(opt){
    for (var key in opt) {
        if (key=="msg"  && typeof opt[key]==="string")
            alert.append(opt[key]); //alert message
        else if (typeof opt[key]==="function") { //alert functional button
            console.log(key, "is a function");
            $("<input type=button>").val(key).appendTo(alert)
                .on("click",function(){ console.log(key, 'called'); opt[key](); close(); });
        } else { //alert pretty button
            console.log(key, "is not a function");
            //$("<input type=button>").val(key).appendTo(alert).click(close);
        }
    }
}
dialog({msg:"Yes or no?",yes:function(){},no:''});

仅创建'是'输入，但当我点击它时，'no'被称为函数：

yes is function         dialog.js:41
no is not a function    dialog.js:44
no called               dialog.js:43
Uncaught TypeError: Property 'no' of object #<Object> is not a function

Answer 1

这是因为您在所有处理程序之间共享key变量，它们的值是退出循环后的值'no'。解决方案是绑定每个处理程序，jquery允许您通过将额外的数据参数传递给$.on来为每个事件分配数据

function dialog(opt){
    for (var key in opt) {
        $("<input type=button value="+key+" style='margin:5% 3%;padding:3% 7%;'>").
        appendTo('#alert').
        on("click", {fn: opt[key]}, function(e){
            // Whatever you bound to the argument is stored in e.data
            if (typeof e.data.fn ==="function") {
                e.data.fn();
            } else {
                alert('You passed in "' +  e.data.fn + '"');
            }
        });
    }
}
dialog({
    msg:'Whatever',
    yes:function(){ 
        alert('clicked yes')
    },
    no:''
});

http://jsfiddle.net/mendesjuan/8JChZ/3/

为什么在点击时调用另一个函数？

1 个答案: