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);

但似乎我离我的要求还差得远。

小提琴上的代码

小提琴

更新

可以回调该函数，但是....当我尝试隐藏弹出窗口时，它会被调用多次。 在下拉菜单中选择是或否，然后单击确定或取消两次或三次，您将看到效果

更新的小提琴

[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/