Jquery在按钮单击时返回父函数

Question

我有一个弹出式 div，如确认如下所示

<div class='pop'>
    check me
    <span class="spok">Ok </span>
    <span class="spcancel">cancel </span>
</div>

现在这个弹出窗口将在某些条件下打开，并且在按钮单击时我想将一些值返回给父函数

按钮事件

$(".spok").click(function(){
    return 'OK';
});
$(".spcancel").click(function(){
    return 'CANCEL';
});

showPop 方法

function showpop (){
   $('.pop').show();

}

现在这样调用

var retval = showpop()
alert(retval);

但看来我离我的要求还差得很远。

小提琴代码

Fiddle

更新

能够回调函数但是.... 当我试图隐藏弹出窗口时，它会多次发出警报。在下拉菜单中选择是或否，然后单击确定或取消后，两三次，你会看到效果

更新的小提琴

[Fiddle2][2]

Answer 1

对话框和按钮的操作是异步的。使用回调（例如传递给对话框）或事件来广播结果。一种方法是为您的弹出窗口提供一个回调，该回调会被回调并返回结果：

function showpop (onclose){
   $('.pop').show();
    $(".spok").click(function(){
        onclose('OK');
    });
    $(".spcancel").click(function(){
        onclose('CANCEL');
    });   
}

$(document).ready(function(){
    var retval = showpop(function(retval){
        alert(retval);
    });
}); 

JSFiddle: http://jsfiddle.net/TrueBlueAussie/gp5emrm4/4/

注意：点击的事件处理程序应该更具体到对话框（可能使用委托事件，而不是附加到弹出窗口）：

function showpop (onclose){
   $('.pop').show().on('click', 'span', function(){
        onclose($(this).attr('class'));   // or some other property of the button
    });
}

更实际的例子（使用data-属性）：

JEFiddle： http://jsfiddle.net/TrueBlueAussie/gp5emrm4/5/