从JQuery Widget返回一个值

Question

我已经创建了一个JQuery小部件来弹出一个对话框，并允许从该对话框中接受值

我的函数定义对话关闭

 _ebSaveDialogue: function () {
     //Saving Dialogue
     $('#ebDialogueClose').click(function () {
         var text = $('#ebPlaceholder').val();
         returnText = text;
         $('#ebDialogue_div').dialog("close");
     });
 }

如何在关闭对话时获得html页面中的returnText值?

我试着在html中调用变量，但它返回null，因为对话框没有打开或关闭。我想在对话结束时接收Html中的数据

部件

 $.widget('custom.DivPopUp', {
     //Call Constructor
     _create: function () {
         var returnText;
         this._ebDefineDiv();
     },
     _ebDefineDiv: function () {
         if ($("#ebDialogue_div").length == 0) {
             //Bringing Dialogue box
             $("body").append("<div id='ebDialogue_div' title='Expression Builder'></div>");
             var inDialogueDiv = "<div id='ebLeftPanel'></div><div id='ebRightPanel'></div>";
             inDialogueDiv += "<div id='ebSample_div' title='Sample'></div>";
             $('#ebDialogue_div').append(inDialogueDiv);
             this._ebCreateDialoge();
             this._ebSaveDialogue();
         }
     },
     _ebSaveDialogue: function () {
         //Saving Dialogue
         $('#ebDialogueClose').click(function () {
             var text = $('#ebPlaceholder').val();
             returnText = text;
             $('#ebDialogue_div').dialog("close");
         });
     }
 }(jQuery));

Html

$('#Id').DivPopUp();

Answer 1

使用JQuery，你可以触发自定义事件。

根据你的代码的一个例子:

_ebSaveDialogue: function () {
     //Saving Dialogue
     $('#ebDialogueClose').click(function () {
         var text = $('#ebPlaceholder').val();
         returnText = text;
         $('#ebDialogue_div').dialog("close");
         $('#ebDialogue_div').trigger('save_action', returnText);
     });
 }

然后，从脚本中的任何其他位置为该事件设置一个事件侦听器

$('#ebDialogue_div').on('save_action', function(event, returnText){
    alert(returnText);
});

Answer 2

你需要添加一个回调

$.widget('custom.DivPopUp', {
     //Call Constructor
     _create: function () {
         var returnText;
         this._ebDefineDiv();
     },
     _ebDefineDiv: function () {
         if ($("#ebDialogue_div").length == 0) {
             //Bringing Dialogue box
             $("body").append("<div id='ebDialogue_div' title='Expression Builder'></div>");
             var inDialogueDiv = "<div id='ebLeftPanel'></div><div id='ebRightPanel'></div>";
             inDialogueDiv += "<div id='ebSample_div' title='Sample'></div>";
             $('#ebDialogue_div').append(inDialogueDiv);
             this._ebCreateDialoge();
             this._ebSaveDialogue();
         }
     },
     _ebSaveDialogue: function () {
         //Saving Dialogue
         $('#ebDialogueClose').click(function () {
             var text = $('#ebPlaceholder').val();
             returnText = text;
             $('#ebDialogue_div').dialog("close");
             this._trigger( "complete", null, { value: 100 } );
         });
     }
 }(jQuery));

然后

 $('#Id').DivPopUp({complete:function(event, data) {
     var returnText = data.value;
 }});