Question

我遇到了一个问题，我想在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并且让我知道我可能做错了什么，我真的很感激。感谢。

Answer 1

我更新了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());
        });

Answer 2

此功能实际上内置于对话框方法中。

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

我希望这有帮助！如果您有疑问，请告诉我。

Answer 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

从未显示在jQuery UI对话框中的文本框输入

3 个答案: