jQuery UI 对话框，打开对话框后如何更改文本答案

【问题标题】：jQuery UI Dialog, How to change text once the dialog is openedjQuery UI 对话框，打开对话框后如何更改文本
【发布时间】：2010-07-26 16:37:34
【问题描述】：

我想在运行与按钮关联的函数之前单击对话框中的按钮并更改消息区域上的文本，或者只是将文本更改为函数的一部分。

【问题讨论】：

标签： jquery user-interface dialog

【解决方案1】：

您可以像这样使用 .onclick 事件...

<div id="targetSelector">Click Me</div>
<div id="messageAreaSelector"></div>

//jquery code to attach click to targetSelector
$('#targetSelector').click(function() {
  //code to update message area 
  $('#messageAreaSlector').html("Text to tell user"); 
  //call to function you want to perform 
  CallSelfDefinedFunction(arguments); 
});

【讨论】：

也许我说得不够清楚，我们正在讨论 JQuery UI 对话框结构。初始化后，我应该能够按照您的建议识别对话框上的消息区域。通过 EI 的开发人员工具查看 HTML，消息区域似乎与用于实现 Dialog 结构的 Div 具有相同的 ID。更改该元素的 html 不会更改对话框消息区域中的文本。
不确定我是否遵循 - 如果您使用 stock example of a jQuery dialog，您只需在段落标签中添加一个 ID，即 This is the default dialog... 等。然后您使用 $('idYouJustAppliedToThePTag' 更改文本).html('你想说什么');所以我认为克里斯是正确的答案，对吧？如果您无法访问段落标签的代码，可以这么说，您可以使用 jQuery 选择器来选择嵌入在对话框 div 中的标签。还是我错过了什么？

【解决方案2】：

只需在对话框中放置一个文本区域，它将是可编辑的。如果你想切换是否可以编辑，只需添加一个按钮。

(function ($) {
    var $dialog = $('<div></div>')
                    .html('<textarea id="myContent" rows=7 cols=25>Edit me</textarea>')
                    .dialog({
                        autoOpen: false,
                        title: 'editable dialog',
                        buttons: {
                            "Edit": function () { $("#myContent").attr("disabled", !$("#myContent").attr("disabled")); }
                        },
                        height: "auto",
                        width: "auto"
                    });

    $('.dlog').click(function () {
        $dialog.dialog('open');
        return false;
    });
})(jQuery);

【讨论】：

是 (function($)...})(jQuery), 是在 body 加载事件中加载它的一种方式吗？ [感谢您分享这个sn-p！它对我建立对话有很大帮助]

【解决方案3】：

您可以将函数绑定到关闭事件 - http://jqueryui.com/demos/dialog/#event-close。我打赌你可以在里面修改你的文字。

【讨论】：

event.close 为时已晚。在按钮选项中定义的与按钮关联的函数在对话框关闭之前完全运行，因为按钮函数是这样定义的：buttons['View'] = function() { FunctionName(); $(this).dialog('close'); };
我应该补充一点，我需要用户在对话框关闭之前看到函数运行时的文本。
以下似乎有效，但与对话框按钮相关的功能不同。 $("#DialogIdentifyer p").text('更改消息区域');如果该语句作为定义为按钮函数的单个语句或在定义为按钮函数的单个函数内运行，则对话框文本区域将发生变化。如果在按钮应该激活的功能之前调用该语句，则它不起作用。