Question

我创建了一个JQuery Widget来弹出一个对话框，并允许从该对话框中接受值

我的功能定义对话关闭

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

如何在结束对话时获取html页面中的returnText值？

我尝试在html中调用变量，但由于对话框未打开或关闭，因此返回null。我希望在对话结束时收到Html中的数据

的widget

 $.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

您需要添加callback

所以

$.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;
 }});

Answer 2

使用JQuery，您可以trigger自定义事件。

根据您的代码示例：

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

然后，从脚本中的任何其他位置，为该事件设置event listener

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

从JQuery Widget返回一个值

2 个答案: