动态内容的jQuery对话框

Question

我想要动态地创建一个jQuery对话框。我使用了以下代码：

var newDiv = $(document.createElement('div')); 
$(newDiv).html('hello there');
$(newDiv).dialog();

然后我在HTML头部添加了以下内容：

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>

当我尝试在IE7中运行JS时，会在$(newDiv).dialog();这一行上出现以下错误： 对象不支持此属性或方法。

有人知道发生了什么吗？

- DEH

Answer 1

你的代码可以正常运行，你可以在这里测试它，这意味着你可能有一个脚本包含的问题，请确保你的文件在页面旁边的js文件夹下面，或者如果你想从站点根目录获取它们，请使用/js。

或者，考虑使用CDN。

你可以使你的代码更加高效（我知道这只是一个测试），像这样：

var newDiv = $(document.createElement('div')); 
newDiv.html('hello there');
newDiv.dialog();

这能够工作是因为 newDiv 已经是一个jQuery元素，没有必要每次都克隆对象...或者更简洁一点：

$('<div />').html('hello there').dialog();

- Nick Craver

---

我已经在根目录下有一个js文件夹，其中包含jquery-1.4.2.min.js和jquery-ui-1.8.1.custom.min.js。我还有一些其他的jQuery东西（选项卡），它们都正常工作。这不意味着我的jQuery引用是正确的吗？ 该代码通过按钮的onclick事件调用。 - DEH

我用以下内容替换了我的js引用:<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 然后它就开始工作了。即使这些文件没有通过脚本标记直接引用，我是否需要在我的js文件夹中添加一些额外的.js文件？ - DEH

@DEH - 如果你使用的是jQuery和jQuery UI，那么所有脚本都在这两个文件中。你可能还想以同样的方式包含jQuery UI的CSS。请查看此问题以获取这些URL：http://stackoverflow.com/questions/1348559/are-there-hosted-jquery-ui-themes-anywhere，只需将所需主题的URL中的“1.7.0”替换为“1.8”（以匹配您的jQuery UI脚本版本），例如：http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css - Nick Craver

只是确认一下，我的js/jquery-ui-1.8.1.custom.min.js文件是一个自定义的js下载，其中不包括jQuery Dialog的内容。一旦我创建了一个新的下载包含Dialog元素，那么它就可以与我自己内部的.js引用一起工作了。 - DEH

Answer 2

这里有一种动态创建对话框及其消息的替代方法：

     $('<div></div>').dialog({
        modal: true,
        title: "Confirmation",
        open: function() {
          var markup = 'Hello World';
          $(this).html(markup);
        },
        buttons: {
          Ok: function() {
            $( this ).dialog( "close" );
          }
        }
      });  //end confirm dialog

看它在实际操作中的效果：http://jsfiddle.net/DYbwb/

- Chad Kuehn

---

我已经添加了一行代码在关闭函数后，以确保当对话框关闭时新创建的div被删除。请查看http://jsfiddle.net/DYbwb/597/ - KMX

哇，这应该是用户采纳的答案。非常详细，jsfiddle非常感谢。 - mike

KMX - 我没有添加按钮，而是采纳了您的建议并修改了关闭功能（否则只有在单击按钮时才会删除它，而不是在使用 X 关闭时）。感谢您提供的起点，调整别人的答案比从头开始编写要容易得多！ - iheggie

Answer 3

代码很好，你需要的是jQuery和jQuery UI的参考文献。

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

- Leon