来自文本框的输入未显示在 jQuery UI 对话框中答案

【问题标题】：Input from textboxes not displaying in a jQuery UI Dialog box来自文本框的输入未显示在 jQuery UI 对话框中
【发布时间】：2014-04-11 14:55:35
【问题描述】：

我遇到了一个问题，我想在 jQuery UI 对话框中显示用户输入，但它没有捕获任何值。我知道该插件可以工作，但我在对话框中显示来自文本框的用户输入的代码似乎是粗制滥造的。我注释掉了在我的JSFiddle 中破坏插件的代码。我基本上希望用户在文本框中输入的任何数据都显示在我在插件确认窗口中创建的空 div 中。

HTML：

First Name: <input type="text" id="name">
<br>
Last Name: <input type="text" id="last">
<br>
<input type="submit" id="button" value="Activate Plugin">

<div id="dialog" title="Confirmation">Please confirm that the following information is correct: <br>
First Name: <div id="firstinput"></div>
Last Name: <div id="lastinput"></div>
</div>

工作 jQuery 插件代码和注释掉的非工作代码：

     $(document).ready(function() {
          $('#dialog').dialog({
              autoOpen: false,
              width: 600,
              buttons: {
                  "Correct": function() {
                      $(this).dialog("close");
                  },
                  "Incorrect": function() {
                      $(this).dialog("close");
                  }
              }
          });

          $('#button').click(function() {
              $('#dialog').dialog('open');
              return false;
          });
      });
      /*INPUT FROM TEXTBOXES DISPLAYING IN THE PLUGIN CONFIRMATION WINDOW LOGIC
      $(document).ready(function () {
          if $("#first").val() {
              $(this).appendTo("#firstinput");
          }
          else if ("#last").val() {
              $(this).appendTo("#lastinput");
          };
      });*/

如果有人查看我的fiddle 并让我知道我可能做错了什么，我将不胜感激。谢谢。

【问题讨论】：

if 语句的语法错误。没有#first 元素。 if 语句中的$(this) 指的是document 元素，因此不能附加到#firstinput 或#lastinput
@RGraham 我可以用这种方法完成我想要做的事情吗？我的语法应该如何？抱歉，我对 Web 开发很陌生。
没有真正需要像你一样多次调用对话框。查看下面我的答案，了解使用更少代码的解决方案。

标签： jquery jquery-ui validation textbox jquery-ui-dialog

【解决方案1】：

这个功能实际上是内置在对话框方法中的。

http://jsfiddle.net/TR6gy/2/ ：这是一个例子。

$('#button').click(function (e) {
    e.preventDefault();
    $('#dialog').dialog({
        width: 600,
        open: function () {
            $('#firstinput').html('<span>' + $('#name').val() + '</span>');
            $('#lastinput').html('<span>' + $('#last').val() + '</span>');
        },
        buttons: {
            "Correct": function () {
                $(this).dialog("close");
            },
            "Incorrect": function () {
                $(this).dialog("close");
            }
        }
    });
});

open 事件将允许您在打开对话框时触发自定义函数。这更有效，因为您没有向按钮添加多个事件或功能。

更多信息在这里：http://api.jqueryui.com/dialog/#event-open

我希望这会有所帮助！如果您有任何问题，请告诉我。

【讨论】：

这似乎是最好的解决方案，所以我会选择它作为答案，尽管其他人的小提琴工作得很好。谢谢大家，点赞。我昨天也试图通读 API 文档，但它似乎太神秘了。至少我现在可以理解工作代码的作用了。
刚开始时，可能会有些混乱。但是，一旦您习惯了它，文档就是您最好的朋友。 :)

【解决方案2】：

我已经更新了JsFiddle

这是我所做的更改。

   <div id="dialog" title="Confirmation">Please confirm that the following information is correct: <br>
        First Name: <label id="firstinput"></label><br>
        Last Name: <label id="lastinput"></label>
    </div>

        $('#dialog').dialog('open');
              $("#firstinput").text($("#name").val());
              $("#lastinput").text($("#last").val());
        });

【讨论】：

【解决方案3】：

改为在您的按钮单击处理程序中添加必要的代码：

$('#button').click(function() {
    if($("#name").val()) {
        $("#firstinput").text($("#name").val());
    }
    if($("#last").val()) {
        $("#lastinput").text($("#last").val());
    }
    $('#dialog').dialog('open');
    return false;
});

Updated Fiddle

【讨论】：