如何使用 jquery ui 将结果应用于 html 页面？答案

【问题标题】：How to apply result to html page by using jquery ui?如何使用 jquery ui 将结果应用于 html 页面？
【发布时间】：2015-07-03 01:07:16
【问题描述】：

我想使用 jquery ui（对话框）自动创建一个隐藏的输入标签。它正在正确执行。但结果无法应用于html页面。

我设计了一个按钮来调用对话框，像这样：

<input id="btn" type="button" value="Click me" />
<div id="dialog-box" title="My dialog">
<span>Any text here...</span>
</div>

和一个div 来存储结果：

<div class="result">
</div>

我的脚本代码是：

function myFunction()
    {
        $(".result").append("<input id=\"CategoryId\" type=\"hidden\" value=\"abc\" />");
        $("#dialog-box").dialog("close");        
    }

    $("#dialog-box").dialog({
        autoOpen: false,
        height: 100,
        width: 250,
        modal: true,
        buttons: {
            "Ok": myFunction,
            "Cancel": function () {
                $("#dialog-box").dialog("close");
            }
        },
        close: function () {
        }
    });
    $("#btn").click(function () {
        $("#dialog-box").dialog("open");
    });

当我查看页面源代码时，没有创建任何内容。我已经通过将这一行放入 myFunction() 对其进行了测试：alert("Category id: " + $("#CategoryId").val());

它向我展示了结果：Category id: abc

但页面源上的div 仍然是：

<div class="result">
</div>

我已将这些行粘贴在顶部：

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

你能告诉我为什么以及如何解决它吗？谢谢！

【问题讨论】：

如何检查没有添加？ HTML 源代码没有更新，因为这是返回服务器的内容，而不是反映客户端所做的任何更改。要检查它，请改为在浏览器中检查元素。也就是说，注意 ID 在文档上下文中必须是唯一的，如果多次单击对话框 ok 按钮，您的逻辑可能会带来无效的 HTML 标记

标签： javascript jquery jquery-ui

【解决方案1】：

您的代码没有任何问题，并且运行良好并向.result添加隐藏输入

为什么看不到hidden input源代码？

浏览器无法显示动态添加的项目（由 JavaScript 添加的项目），如果您想查看它，您应该使用 Inspect Element 或 firebug (Firefox) .

让我给你看一张图片：

看看这个demo

编辑：看看你在做什么真的更好，我建议你在测试结束之前将隐藏更改为文本。现在您可以在单击对话框中的“确定”后看到您所拥有的内容。

我将在这里做的只是一个小测试，我希望当对话框中的 OK 单击警报时显示 hidden input 值中的内容。我的意思是在my_function 内部（在此之前将类result 更改为id result）：

var theVal
function myFunction()
    {
        $(".myresult").html("<input id=\"CategoryId\" type=\"text\" value=\"abc\" />");
        $("#dialog-box").dialog("close"); 
         theVal=$(".myresult input").val();
         alert(theVal);
    }

您可以使用 Ajax 发送此变量，也可以通过表单发送。

【讨论】：

谢谢。你能告诉我如何将dynamic item（如你的意思）转换为normal item。我想在其他地方重新使用隐藏输入标签的值。所以如果它不能正常显示在页面源上，我就不会被检测到。
你可以定义变量，或者如果你要提交。您可以创建一个<form> 并插入hidden input 以形成然后提交。
@Kevin 好的，测试时间。你觉得我的回答怎么样？
我正在根据您的建议进行测试。我创建了一个表单并添加了var form = dialog.find( "form" ).on( "submit", function( event ) { event.preventDefault(); myFunction(); }); 但仍然无法正常工作:((hidden input 无法显示。
@Kevin 请看一下编辑。如果这不是您需要的，请告诉我，我们会再次帮助您（如果您需要）

【解决方案2】：

尝试将结果类更改为 id，jquery 中的类搜索返回一个数组。

  $("#result").append("<input id=\"CategoryId\" type=\"hidden\"       value=\"abc\" />");

和

<div id="result">

或者如果它需要是一个类并且是第一个结果类元素，那么使用

  $(".result")[0].append("<input id=\"CategoryId\" type=\"hidden\"       value=\"abc\" />");

【讨论】：

【解决方案3】：

我同意 LASH 的回答...您的代码看起来不错，无需更改任何内容，查看 div 结果中的文本使用检查元素而不是查看源代码。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<input id="btn" type="button" value="Click me" />
<div id="dialog-box" title="My dialog">
    <span>Any text here...</span>
</div>

<div class="result"></div>

<script type="text/javascript">
    function myFunction()
    {   
        $(".result").html("<input id=\"CategoryId\" type=\"hidden\" value=\"abc\" />");
        $("#dialog-box").dialog("close");        
    }

    $("#dialog-box").dialog({
        autoOpen: false,
        height: 300,
        width: 250,
        modal: true,
        buttons: {
            "Ok": myFunction,
            "Cancel": function () {
                $("#dialog-box").dialog("close");
            }
        },
        close: function () {
        }
    });
    $("#btn").click(function () {
        $("#dialog-box").dialog("open");
    });
  </script>
</body>
</html>

【讨论】：