初始化前无法在对话框上调用方法;尝试调用方法 'open'

Question

我正在使用此脚本打开对话框。但是，它会抛出一个错误：

错误：初始化前无法在对话框上调用方法;试图调用方法"open">

以下是 HTML 代码：

<div class="content-wrapper" style="display:none">
<div id="dialog-error" title="LIST ERROR">
<div class="row">
<div class="">
<div class="col-md-4">
<span class="text text-green"><b>FIELD</b></span>
<div id="container-field">
<table class="table table-condensed table-bordered table-hover" >
<tbody id="container-field-error">
</tbody>
</table>
</div>
</div>
<div class="col-md-8">
<div class="row">
<span class="text text-green"><b>ERROR MESSAGE</b></span>
<div id="container-message" style="min-height: 150px">
</div>
</div>
<div class="row">
<span class="text text-green"><b>TYPE</b></span>
<div id="container-type" style="min-height: 150px">
</div>
</div>
</div>
</div>
</div>
</div>
</div>

这是脚本：

$("#dialog-error").dialog({
autoOpen: false,
width: '700px',
resizeable: false,
position: {
my: 'top',
at: 'top+150',
of: window
}
});
$('.btn-list-error').live('click', function () {
$('#dialog-error').dialog('open');
});

这是我代码中的jQuery版本：

<script src="<?php echo Yii::app()->theme->baseUrl ?>/js/jQuery/jQuery-2.1.4.min.js"></script>
<script src="<?php echo Yii::app()->theme->baseUrl ?>/js/jQuery/jQuery-migrate-1.2.1.min.js"></script>
<script src="<?php echo Yii::app()->theme->baseUrl ?>/js/jquery-ui-1.11.4/jquery-ui.min.js"></script>
<script src="<?php echo Yii::app()->theme->baseUrl ?>/js/bootstrap.min.js"></script>
<!--<script src="<?php echo Yii::app()->theme->baseUrl ?>/js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="<?php echo Yii::app()->theme->baseUrl ?>/js/jquery.ui.touch-punch.min.js"></script>-->
<script class="include" type="text/javascript" src="<?php echo Yii::app()->theme->baseUrl ?>/js/jquery.dcjqaccordion.2.7.js"></script>
<script src="<?php echo Yii::app()->theme->baseUrl ?>/js/common-scripts.js"></script>

任何人都可以帮我这里有什么问题？jQuery冲突吗？

Answer 1

我想出了这是怎么回事。就我而言，问题出在 html 代码中。我的 html 代码中有一个错误。我使用 css 类是错误的。修复错误后，代码运行良好。

Answer 2

在调用 open 函数之前，您必须初始化 jquery 对话框。在你的html中，你可以在head元素中进行jquery的初始化。

<script type="text/javascript">
$(document).ready(function () {
initializeDialog();
});
</script>

并更改您的js文件以在initializeDialog()函数中包含对话框代码。

function initializeDialog(){
$("#dialog-error").dialog({
autoOpen: false,
width: '700px',
resizeable: false,
position: {
my: 'top',
at: 'top+150',
of: window
}
});
}