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/