带有动态内容的jQuery对话框

时间:2010-08-06 12:45:41

标签: jquery jquery-ui-dialog

我想在运行中创建一个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()上遇到以下错误:线: Object不支持此属性或方法。

任何人都知道发生了什么事?

3 个答案:

答案 0 :(得分:59)

您的代码有效,您可以对其进行测试here,这意味着您可能遇到脚本包含问题,请确保您的文件位于页面旁边的js文件夹,或者如果您希望它们来自网站根目录,请改用/js

或者,consider using a CDN

你可以让你的代码更有效率(我意识到这只是一个测试),像这样:

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

这是有效的,因为newDiv 已经一个jQuery元素,没有理由每次克隆对象......或者更短一些:

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

答案 1 :(得分:17)

以下是动态创建对话框及其消息的另一种方法:

     $('<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/

答案 2 :(得分:0)

代码很好,你需要的是jquery和jquery ui的引用

&#13;
&#13;
<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>
&#13;
&#13;
&#13;