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

Jquery return to parent function on button click

本文关键字：函数 返回 Jquery 按钮 单击      更新时间：2023-09-26

我有一个类似确认的弹出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

更新

能够调用函数，但。。。。当我试图隐藏弹出窗口时，它会提醒我它被调用的次数。在下拉列表中选择"是"或"否"，然后单击"确定"或"取消"两到三次后，您将看到效果

更新的fiddle

[Fiddle2][2]

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

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/

相关文章：