此错误的可能原因：

Question

当用户单击链接时，我想填充一个模式对话框并显示它。因此，我使用AJAX使用GET方法的响应填充此模型对话框，如下所示：

HTML：

<a data-rec="@Model.rec" data-seg="@Model.seg" data-det="@Model.seg" class="btn btn-default checkRulesLink">Check Rules</a>
<div id="dialog-rules" title="Rules" class="dialog">
</div>

JavaScript：

$("#dialog-rules").dialog({
  autoOpen: false,
  modal: true,
  title: "Details",
  buttons: {
    Close: function() {
      $(this).dialog('close');
    }
  }
});

$(".checkRulesLink").click(function(e) {
  $("#dialog-rules").html("");
  e.preventDefault();
  var rec = $(this).data('rec');
  var seg = $(this).data('seg');
  var det = $(this).data('det');
  $.ajax({
    url: "/Booking/CheckRules?rec=" + rec + "&seg=" + seg + "&det=" + det,
    success: function(result) {
      console.log(result);
      $("#dialog-rules").html(result);
      $("#dialog-rules").dialog("open");
    }
  });
});

AJAX调用工作正常，但是每当我单击链接时，都会出现此错误：

Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'
    at Function.error (VM32 jquery-1.12.4.js:253)
    at HTMLDivElement.<anonymous> (VM33 jquery-ui.js:246)
    at Function.each (VM32 jquery-1.12.4.js:370)
    at jQuery.fn.init.each (VM32 jquery-1.12.4.js:137)
    at jQuery.fn.init.$.fn.(anonymous function) [as dialog] (https://code.jquery.com/ui/1.12.1/jquery-ui.js:236:10)
    at Object.success (Flights:18216)
    at fire (VM32 jquery-1.12.4.js:3232)
    at Object.fireWith [as resolveWith] (VM32 jquery-1.12.4.js:3362)
    at done (VM32 jquery-1.12.4.js:9840)
    at XMLHttpRequest.callback (VM32 jquery-1.12.4.js:10311)
error @ VM32 jquery-1.12.4.js:253
(anonymous) @ VM33 jquery-ui.js:246
each @ VM32 jquery-1.12.4.js:370
each @ VM32 jquery-1.12.4.js:137
$.fn.(anonymous function) @ VM33 jquery-ui.js:236
success @ Flights:18216
fire @ VM32 jquery-1.12.4.js:3232
fireWith @ VM32 jquery-1.12.4.js:3362
done @ VM32 jquery-1.12.4.js:9840
callback @ VM32 jquery-1.12.4.js:10311
XMLHttpRequest.send (async)
send @ VM32 jquery-1.12.4.js:10254
ajax @ VM32 jquery-1.12.4.js:9738
(anonymous) @ Flights:18211
dispatch @ VM32 jquery-1.12.4.js:5226
elemData.handle @ VM32 jquery-1.12.4.js:4878
2VM95:46 Uncaught TypeError: jQuery.easing[jQuery.easing.def] is not a function
    at Object.swing (eval at <anonymous> (VM32 jquery-1.12.4.js:349), <anonymous>:46:42)
    at init.run (VM32 jquery-1.12.4.js:7402)
    at tick (VM32 jquery-1.12.4.js:7747)
    at jQuery.fx.tick (VM32 jquery-1.12.4.js:8069)
swing @ VM95:46
run @ VM32 jquery-1.12.4.js:7402
tick @ VM32 jquery-1.12.4.js:7747
jQuery.fx.tick @ VM32 jquery-1.12.4.js:8069
setInterval (async)
jQuery.fx.start @ VM32 jquery-1.12.4.js:8093
jQuery.fx.timer @ VM32 jquery-1.12.4.js:8083
Animation @ VM32 jquery-1.12.4.js:7823
doAnimation @ VM32 jquery-1.12.4.js:7926
dequeue @ VM32 jquery-1.12.4.js:4157
(anonymous) @ VM32 jquery-1.12.4.js:4201
each @ VM32 jquery-1.12.4.js:370
each @ VM32 jquery-1.12.4.js:137
queue @ VM32 jquery-1.12.4.js:4194
animate @ VM32 jquery-1.12.4.js:7937
jQuery.fn.(anonymous function) @ VM32 jquery-1.12.4.js:8053
(anonymous) @ VM83:24
fire @ VM32 jquery-1.12.4.js:3232
add @ VM32 jquery-1.12.4.js:3291
jQuery.fn.ready @ VM32 jquery-1.12.4.js:3542
(anonymous) @ VM83:1
(anonymous) @ VM32 jquery-1.12.4.js:349
globalEval @ VM32 jquery-1.12.4.js:350
text script @ VM32 jquery-1.12.4.js:10372
ajaxConvert @ VM32 jquery-1.12.4.js:9332
done @ VM32 jquery-1.12.4.js:9789
callback @ VM32 jquery-1.12.4.js:10311
send @ VM32 jquery-1.12.4.js:10321
ajax @ VM32 jquery-1.12.4.js:9738
jQuery._evalUrl @ VM32 jquery-1.12.4.js:9902
domManip @ VM32 jquery-1.12.4.js:6086
append @ VM32 jquery-1.12.4.js:6269
(anonymous) @ VM32 jquery-1.12.4.js:6375
access @ VM32 jquery-1.12.4.js:4399
html @ VM32 jquery-1.12.4.js:6338
success @ Flights:18215
fire @ VM32 jquery-1.12.4.js:3232
fireWith @ VM32 jquery-1.12.4.js:3362
done @ VM32 jquery-1.12.4.js:9840
callback @ VM32 jquery-1.12.4.js:10311
XMLHttpRequest.send (async)
send @ VM32 jquery-1.12.4.js:10254
ajax @ VM32 jquery-1.12.4.js:9738
(anonymous) @ Flights:18211
dispatch @ VM32 jquery-1.12.4.js:5226
elemData.handle @ VM32 jquery-1.12.4.js:4878
js?key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg:95 You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.
Hg @ js?key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg:95
(anonymous) @ js?key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg:158
google.maps.Load @ js?key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg:18
(anonymous) @ js?key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg:158
(anonymous) @ js?key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg:159
373VM95:46 Uncaught TypeError: jQuery.easing[jQuery.easing.def] is not a function
    at Object.swing (eval at <anonymous> (VM32 jquery-1.12.4.js:349), <anonymous>:46:42)
    at init.run (VM32 jquery-1.12.4.js:7402)
    at tick (VM32 jquery-1.12.4.js:7747)
    at jQuery.fx.tick (VM32 jquery-1.12.4.js:8069)
swing @ VM95:46
run @ VM32 jquery-1.12.4.js:7402
tick @ VM32 jquery-1.12.4.js:7747
jQuery.fx.tick @ VM32 jquery-1.12.4.js:8069
setInterval (async)
jQuery.fx.start @ VM32 jquery-1.12.4.js:8093
jQuery.fx.timer @ VM32 jquery-1.12.4.js:8083
Animation @ VM32 jquery-1.12.4.js:7823
doAnimation @ VM32 jquery-1.12.4.js:7926
dequeue @ VM32 jquery-1.12.4.js:4157
(anonymous) @ VM32 jquery-1.12.4.js:4201
each @ VM32 jquery-1.12.4.js:370
each @ VM32 jquery-1.12.4.js:137
queue @ VM32 jquery-1.12.4.js:4194
animate @ VM32 jquery-1.12.4.js:7937
jQuery.fn.(anonymous function) @ VM32 jquery-1.12.4.js:8053
(anonymous) @ VM83:24
fire @ VM32 jquery-1.12.4.js:3232
add @ VM32 jquery-1.12.4.js:3291
jQuery.fn.ready @ VM32 jquery-1.12.4.js:3542
(anonymous) @ VM83:1
(anonymous) @ VM32 jquery-1.12.4.js:349
globalEval @ VM32 jquery-1.12.4.js:350
text script @ VM32 jquery-1.12.4.js:10372
ajaxConvert @ VM32 jquery-1.12.4.js:9332
done @ VM32 jquery-1.12.4.js:9789
callback @ VM32 jquery-1.12.4.js:10311
send @ VM32 jquery-1.12.4.js:10321
ajax @ VM32 jquery-1.12.4.js:9738
jQuery._evalUrl @ VM32 jquery-1.12.4.js:9902
domManip @ VM32 jquery-1.12.4.js:6086
append @ VM32 jquery-1.12.4.js:6269
(anonymous) @ VM32 jquery-1.12.4.js:6375
access @ VM32 jquery-1.12.4.js:4399
html @ VM32 jquery-1.12.4.js:6338
success @ Flights:18215
fire @ VM32 jquery-1.12.4.js:3232
fireWith @ VM32 jquery-1.12.4.js:3362
done @ VM32 jquery-1.12.4.js:9840
callback @ VM32 jquery-1.12.4.js:10311
XMLHttpRequest.send (async)
send @ VM32 jquery-1.12.4.js:10254
ajax @ VM32 jquery-1.12.4.js:9738
(anonymous) @ Flights:18211
dispatch @ VM32 jquery-1.12.4.js:5226
elemData.handle @ VM32 jquery-1.12.4.js:4878
maps.googleapis.com/maps/gen_204?target=api&ev=api_alreadyloaded&client=&key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg&cad=src:apiv3,token:4u7gju54e3,ts:nhesob:1 GET http://maps.googleapis.com/maps/gen_204?target=api&ev=api_alreadyloaded&client=&key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg&cad=src:apiv3,token:4u7gju54e3,ts:nhesob 0 ()
Image (async)
LY.b @ stats.js:5
(anonymous) @ js?key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg:158
(anonymous) @ js?key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg:63
(anonymous) @ js?key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg:60
(anonymous) @ js?key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg:63
(anonymous) @ js?key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg:135
(anonymous) @ js?key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg:60
(anonymous) @ js?key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg:135
(anonymous) @ js?key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg:60
(anonymous) @ js?key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg:135
Rd @ js?key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg:63
Qd.va @ js?key=AIzaSyASHcSQGj-zxu3xPF5e07MFU4L_jxxBXcg:135
(anonymous) @ util.js:1
2334VM95:46 Uncaught TypeError: jQuery.easing[jQuery.easing.def] is not a function
    at Object.swing (eval at <anonymous> (VM32 jquery-1.12.4.js:349), <anonymous>:46:42)
    at init.run (VM32 jquery-1.12.4.js:7402)
    at tick (VM32 jquery-1.12.4.js:7747)
    at jQuery.fx.tick (VM32 jquery-1.12.4.js:8069)
swing @ VM95:46
run @ VM32 jquery-1.12.4.js:7402
tick @ VM32 jquery-1.12.4.js:7747
jQuery.fx.tick @ VM32 jquery-1.12.4.js:8069
setInterval (async)
jQuery.fx.start @ VM32 jquery-1.12.4.js:8093
jQuery.fx.timer @ VM32 jquery-1.12.4.js:8083
Animation @ VM32 jquery-1.12.4.js:7823
doAnimation @ VM32 jquery-1.12.4.js:7926
dequeue @ VM32 jquery-1.12.4.js:4157
(anonymous) @ VM32 jquery-1.12.4.js:4201
each @ VM32 jquery-1.12.4.js:370
each @ VM32 jquery-1.12.4.js:137
queue @ VM32 jquery-1.12.4.js:4194
animate @ VM32 jquery-1.12.4.js:7937
jQuery.fn.(anonymous function) @ VM32 jquery-1.12.4.js:8053
(anonymous) @ VM83:24
fire @ VM32 jquery-1.12.4.js:3232
add @ VM32 jquery-1.12.4.js:3291
jQuery.fn.ready @ VM32 jquery-1.12.4.js:3542
(anonymous) @ VM83:1
(anonymous) @ VM32 jquery-1.12.4.js:349
globalEval @ VM32 jquery-1.12.4.js:350
text script @ VM32 jquery-1.12.4.js:10372
ajaxConvert @ VM32 jquery-1.12.4.js:9332
done @ VM32 jquery-1.12.4.js:9789
callback @ VM32 jquery-1.12.4.js:10311
send @ VM32 jquery-1.12.4.js:10321
ajax @ VM32 jquery-1.12.4.js:9738
jQuery._evalUrl @ VM32 jquery-1.12.4.js:9902
domManip @ VM32 jquery-1.12.4.js:6086
append @ VM32 jquery-1.12.4.js:6269
(anonymous) @ VM32 jquery-1.12.4.js:6375
access @ VM32 jquery-1.12.4.js:4399
html @ VM32 jquery-1.12.4.js:6338
success @ Flights:18215
fire @ VM32 jquery-1.12.4.js:3232
fireWith @ VM32 jquery-1.12.4.js:3362
done @ VM32 jquery-1.12.4.js:9840
callback @ VM32 jquery-1.12.4.js:10311
XMLHttpRequest.send (async)
send @ VM32 jquery-1.12.4.js:10254
ajax @ VM32 jquery-1.12.4.js:9738
(anonymous) @ Flights:18211
dispatch @ VM32 jquery-1.12.4.js:5226
elemData.handle @ VM32 jquery-1.12.4.js:4878

为什么会发生这种情况，我该如何解决？任何帮助将不胜感激。

Answer 1

此错误发生的原因（如错误本身所言），是您尝试在初始化Dialog Widget之前调用方法：

未捕获的错误：无法在对话框初始化之前上调用方法；试图调用方法'open'...

在下面的代码段中显示了错误（为了查看实际错误，请打开浏览器的开发者控制台。）：

function mockAjax(object) {
  console.log('Loaded:', object.url);
  object.success('Data as result from AJAX');
}

$(function() {  
  $(".checkRulesLink").click(function(e) {
    $("#dialog-rules").html("");
    e.preventDefault();
    var rec = $(this).data('rec');
    var seg = $(this).data('seg');
    var det = $(this).data('det');
    mockAjax({
      url: "/Booking/CheckRules?rec=" + rec + "&seg=" + seg + "&det=" + det,
      success: function(result) {
        console.log(result);
        $("#dialog-rules").html(result);
        $("#dialog-rules").dialog("open");
      }
    });
  });
});

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
<a data-rec="@Model.rec" data-seg="@Model.seg" data-det="@Model.seg" class="btn btn-default checkRulesLink">Check Rules</a>
<div id="dialog-rules" title="Rules" class="dialog"></div>

注意：

为了演示起见，使用此function模拟了AJAX调用：

function mockAjax(object) {
  console.log('Loaded:', object.url);
  object.success('Data as result from AJAX');
}

此错误的可能原因：

-代码结构：

由于您的完整代码库的实际结构，$.ajax({...});调用可能在Dialog Widget的实际初始化之前运行，例如：

<script>个元素的顺序不正确
具有<script> / defer属性的async元素在不同时间加载
未被注意的不正确的VCS合并
缩小
typos一般

请确保

：

所有必要的<link/>和<script>资源均已正确放置并正确加载
您的代码包装在$(function() { ... });中，以防止代码在 DOM 加载之前运行

使用以下方法检查是否在元素上初始化了 Dialog Widget ：

if ($("#dialog-rules").dialog && !$("#dialog-rules").dialog("instance")) {
  console.log("The dialog widget is not initialized on this element");
}

然后在if语句中初始化 Dialog Widget ：

var element = $("#dialog-rules");

if (element.dialog && !element.dialog("instance")) {
  element.dialog({
    autoOpen: false,
    modal: true,
    title: "Details",
    buttons: {
      Close: function() {
        $(this).dialog('close');
      }
    }
  });
}

或者更好的是，使用自己的function分隔初始化，并在需要时调用它：

function initDialog(element) {
  if (element.dialog && !element.dialog("instance")) {
    element.dialog({
      autoOpen: false,
      modal: true,
      title: "Details",
      buttons: {
        Close: function() {
          $(this).dialog('close');
        }
      }
    });
  }
}

// ... later in your code ...
initDialog($("#dialog-rules"))
// ...

示例：

function mockAjax(object) {
  console.log('Loaded:', object.url);
  object.success('Data as result from AJAX');
}

function initDialog(element) {
  if (element.dialog && !element.dialog("instance")) {
    console.log("The dialog is not initialized, initialize now");    
    element.dialog({
      autoOpen: false,
      modal: true,
      title: "Details",
      buttons: {
        Close: function() {
          $(this).dialog('close');
        }
      }
    });
  }
}

$(function() {
  $(".checkRulesLink").click(function(e) {
    $("#dialog-rules").html("");
    e.preventDefault();
    var rec = $(this).data('rec');
    var seg = $(this).data('seg');
    var det = $(this).data('det');
    mockAjax({
      url: "/Booking/CheckRules?rec=" + rec + "&seg=" + seg + "&det=" + det,
      success: function(result) {
        var element = $("#dialog-rules");        
        
        console.log(result);
        initDialog(element);
        element.html(result);
        element.dialog("open");
      }
    });
  });
});

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
<a data-rec="@Model.rec" data-seg="@Model.seg" data-det="@Model.seg" class="btn btn-default checkRulesLink">Check Rules</a>
<div id="dialog-rules" title="Rules" class="dialog"></div>

More on the instance() method

-元素已替换：

如果替换了#dialog-rules元素，例如：

// ... somewhere/for some reason the element is replaced ...
$("#dialog-rules").remove(); // or .replaceWith(), or .html() on the parent element
$("body").append('<div id="dialog-rules" title="Rules" class="dialog"></div>');
// ...

对话框小部件必须在新的但似乎很旧的元素上重新初始化：

没有重新初始化的示例（将引发错误）：

function mockAjax(object) {
  console.log('Loaded:', object.url);
  object.success('Data as result from AJAX');
}

$(function() {
  // The dialog widget is properly initialized on the element
  $("#dialog-rules").dialog({
    autoOpen: false,
    modal: true,
    title: "Details",
    buttons: {
      Close: function() {
        $(this).dialog('close');
      }
    }
  });
  
  // somewhere/for some reason the element is replaced ...
  $("#dialog-rules").remove();
  $("body").append('<div id="dialog-rules" title="Rules" class="dialog"></div>');
  // ...

  $(".checkRulesLink").click(function(e) {
    $("#dialog-rules").html("");
    e.preventDefault();
    var rec = $(this).data('rec');
    var seg = $(this).data('seg');
    var det = $(this).data('det');
    mockAjax({
      url: "/Booking/CheckRules?rec=" + rec + "&seg=" + seg + "&det=" + det,
      success: function(result) {
        console.log(result);
        $("#dialog-rules").html(result);
        $("#dialog-rules").dialog("open");
      }
    });
  });
});

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
<a data-rec="@Model.rec" data-seg="@Model.seg" data-det="@Model.seg" class="btn btn-default checkRulesLink">Check Rules</a>
<div id="dialog-rules" title="Rules" class="dialog"></div>

具有重新初始化的示例（无错误）：

function mockAjax(object) {
  console.log('Loaded:', object.url);
  object.success('Data as result from AJAX');
}

function initWidget(element) {
  // reinitialize only, when needed
  if (element.dialog && !element.dialog("instance")) {
    element.dialog({
      autoOpen: false,
      modal: true,
      title: "Details",
      buttons: {
        Close: function() {
          $(this).dialog('close');
        }
      }
    });
  }
}

$(function() {
  // The dialog widget is properly initialized on the element
  initWidget($("#dialog-rules"));
  
  // somewhere/for some reason the element is replaced ...
  $("#dialog-rules").remove();
  $("body").append('<div id="dialog-rules" title="Rules" class="dialog"></div>');
  // ...

  $(".checkRulesLink").click(function(e) {
    $("#dialog-rules").html("");
    e.preventDefault();
    var rec = $(this).data('rec');
    var seg = $(this).data('seg');
    var det = $(this).data('det');
    mockAjax({
      url: "/Booking/CheckRules?rec=" + rec + "&seg=" + seg + "&det=" + det,
      success: function(result) {
        console.log(result);
        initWidget($("#dialog-rules"))
        $("#dialog-rules").html(result);
        $("#dialog-rules").dialog("open");
      }
    });
  });
});

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
<a data-rec="@Model.rec" data-seg="@Model.seg" data-det="@Model.seg" class="btn btn-default checkRulesLink">Check Rules</a>
<div id="dialog-rules" title="Rules" class="dialog"></div>

-小部件已损坏：

如果小部件是使用.dialog("destroy")销毁的，例如：

// ... somewhere/for some reason the dialog widget is destroyed ...
$("#dialog-rules").dialog("destroy");
// ...

元素#dialog-rules返回其初始化前状态。为了再次使用 Dialog Widget ，需要对其重新初始化：

具有重新初始化的示例：

function mockAjax(object) {
  console.log('Loaded:', object.url);
  object.success('Data as result from AJAX');
}

function initWidget(element) {
  // reinitialize only, when needed
  if (element.dialog && !element.dialog("instance")) {
    element.dialog({
      autoOpen: false,
      modal: true,
      title: "Details",
      buttons: {
        Close: function() {
          $(this).dialog('close');
        }
      }
    });
  }
}

$(function() {
  // The dialog widget is properly initialized on the element
  initWidget($("#dialog-rules"));
  
  // somewhere/for some reason the dialog widget is destroyed ...
  $("#dialog-rules").dialog('destroy');
  // ...

  $(".checkRulesLink").click(function(e) {
    $("#dialog-rules").html("");
    e.preventDefault();
    var rec = $(this).data('rec');
    var seg = $(this).data('seg');
    var det = $(this).data('det');
    mockAjax({
      url: "/Booking/CheckRules?rec=" + rec + "&seg=" + seg + "&det=" + det,
      success: function(result) {
        console.log(result);
        initWidget($("#dialog-rules"))
        $("#dialog-rules").html(result);
        $("#dialog-rules").dialog("open");
      }
    });
  });
});

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
<a data-rec="@Model.rec" data-seg="@Model.seg" data-det="@Model.seg" class="btn btn-default checkRulesLink">Check Rules</a>
<div id="dialog-rules" title="Rules" class="dialog"></div>

More on the destroy() method

Answer 2

问题出在您的buttons代码上。

$("#dialog-rules").dialog({
            autoOpen: false,
            modal: true,
            title: "Details",
            buttons: [{
                Text:"Close",
                click: function () {
                    $(this).dialog('close');
               }
           }]
        });

        $(".checkRulesLink").click(function (e) {
            $("#dialog-rules").html("");
            e.preventDefault();
            var rec = $(this).data('rec');
            var seg = $(this).data('seg');
            var det = $(this).data('det');
            function fakeAjax(result){
                 $("#dialog-rules").html(result);
                 $("#dialog-rules").dialog("open");
            }
            fakeAjax("fakeAjax Result");
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>


<a data-rec="rec" data-seg="seg" data-det="seg" class="btn btn-default checkRulesLink">Click Me</a>
<div id="dialog-rules" title="Rules" class="dialog"></div>

Answer 3

我的猜测是jQuery可能会进行大量包装，并插入其自己的元数据来构造“对话框”对象。

从jQuery UI的示例代码来看，我将像这样使用dialog() jQuery函数的返回值：

    var dialog = $("#dialog-rules").dialog({
        autoOpen: false,
        modal: true,
        title: "Details",
        buttons: {
            Close: function () {
                $(this).dialog('close');
            }
        }
    });

    $(".checkRulesLink").click(function (e) {
        $("#dialog-rules").html("");
        e.preventDefault();
        var rec = $(this).data('rec');
        var seg = $(this).data('seg');
        var det = $(this).data('det');
        $.ajax({
            url: "/Booking/CheckRules?rec=" + rec + "&seg=" + seg + "&det=" + det,
            success: function (result) {
                console.log(result);
                $("#dialog-rules").html(result);
                dialog.dialog("open");
            }
        });

    });

请注意在调用$("#dialog-rules").dialog();时如何保存返回值以便以后进行操作。在ajax请求的回调中，可以使用$("#dialog-rules").dialog("open");而不是使用dialog.dialog("open");。不确定是否丢失参考，以后是否可以重新创建该对象，但是jQuery UI上的演示遵循此方法。

作为警告，在$("#dialog-rules).html();调用中，请小心编辑对话框的实际内容。 jQuery也可能包装了内容部分。我将在DOM资源管理器中检查jQuery如何生成对话框。

未捕获的错误：无法在使用jQuery初始化之前在对话框上调用方法

3 个答案:

注意：

此错误的可能原因：

-代码结构：

示例：

-元素已替换：

没有重新初始化的示例（将引发错误）：

具有重新初始化的示例（无错误）：

-小部件已损坏：

具有重新初始化的示例：