jQuery UI：未捕获的 TypeError：无法读取未定义的属性“nodeType”答案

【问题标题】：jQuery UI : Uncaught TypeError: Cannot read property 'nodeType' of undefinedjQuery UI：未捕获的 TypeError：无法读取未定义的属性“nodeType”
【发布时间】：2017-11-29 16:33:36
【问题描述】：

我使用 jQUery UI Dialog:http://jqueryui.com/dialog/（我手动添加到一个 preject web Forms .net）在网页上显示描述文本。这是我当前的代码：

.aspx:

<span id="bullAide" runat="server" class="glyphicon glyphicon-info-sign text-info" style="cursor: pointer;"></span>
<div id="dialog" runat="server" meta:resourcekey="TitreCourriel">
  <p id="txtDescription" runat="server"><%=GetLocalResourceObject("TexteCourriel.Text").ToString()%></p>
</div>

.js:

$("[id$=dialog]").dialog({
    autoOpen: false,
    position: {
        of: $('#bullAide'),
    },
});
$("[id$=bullAide]").click(function (event) {
    setTimeout(function () { $("[id$=dialog]").dialog("open"); }, 1);
    var position = $(this).offset();
    $("[id$=dialog]").parent().css("left", position.left + 30);
    $("[id$=dialog]").parent().css("top", position.top - 30);
    setTimeout(function () { $("[id$=dialog]").parent().css("width", "auto"); }, 1);
});

但是，我有这个错误：未捕获的类型错误：

Cannot read property 'nodeType' of undefined
    at s (http://localhost/FIAF.PES.Particuliers/scripts/jquery-ui.min.js:6:11536)
    at jQuery.fn.init.t.fn.position (http://localhost/FIAF.PES.Particuliers/scripts/jquery-ui.min.js:6:13371)
    at t.(anonymous function).(anonymous function)._position (http://localhost/FIAF.PES.Particuliers/scripts/jquery-ui.min.js:11:7019)
    at t.(anonymous function).(anonymous function)._position (http://localhost/FIAF.PES.Particuliers/scripts/jquery-ui.min.js:6:4499)
    at t.(anonymous function).(anonymous function).open (http://localhost/FIAF.PES.Particuliers/scripts/jquery-ui.min.js:11:937)
    at t.(anonymous function).(anonymous function).open (http://localhost/FIAF.PES.Particuliers/scripts/jquery-ui.min.js:6:4499)
    at HTMLDivElement.<anonymous> (http://localhost/FIAF.PES.Particuliers/scripts/jquery-ui.min.js:6:5446)
    at Function.each (http://localhost/FIAF.PES.Particuliers/scripts/jquery-3.1.1.js:368:19)
    at jQuery.fn.init.each (http://localhost/FIAF.PES.Particuliers/scripts/jquery-3.1.1.js:157:17)
    at jQuery.fn.init.t.fn.(anonymous function) [as dialog] (http://localhost/FIAF.PES.Particuliers/scripts/jquery-ui.min.js:6:5329)

我真的不知道怎么了！

【问题讨论】：

可能您使用的 jquery ui 版本不兼容...您能告诉我们您的 jquery ui 版本吗？...可能您使用的 jquery 版本太高了。跨度>
我使用 jquery-3.1.1 和 jquery-ui-1.12.0
为什么那些（奇怪的）“id 以 ... 结尾”选择器，尤其是当 id 与您匹配的“end”相同时？ setTimeout() 电话是怎么回事？
错误 looks 就像您的 #dialog 没有父级 - 它在另一个 div 中吗？您是否有多个对话框并且有些尚未完全附加？ console.log($("[id$=dialog]").length) 有什么用。您能否将其更改为 $("#dialog") 以确保您只获得您想要获得的一个对话框。
你能创建一个minimal reproducible example 显示它失败了吗？

标签： javascript jquery .net jquery-ui

【解决方案1】：

工作示例：https://jsfiddle.net/Twisty/q0kebgwd/

HTML

<p style="display: inline-block;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent arcu nisi, maximus eget lectus at, egestas pellentesque lectus. Donec varius tristique nunc eu dapibus. Phasellus urna massa, malesuada eu mi eget, vehicula cursus massa. Donec eu fringilla mi. Mauris leo tellus, vestibulum at ex sit amet, aliquam tincidunt lectus. Fusce blandit ex non sapien tempor fringilla. Donec leo ante, faucibus sed suscipit quis, bibendum convallis nulla. Suspendisse blandit dignissim ipsum. Suspendisse consectetur, quam sit amet placerat rhoncus, nisl nunc efficitur magna, ut rhoncus lectus felis ut velit.<span id="bullAide" class="glyphicon glyphicon-info-sign text-info" style="cursor: pointer; margin-left: 3px;"></span></p>
<div id="ContentPlaceHolder1_dialog" runat="server" meta:resourcekey="TitreCourriel">
  <p id="txtDescription" runat="server">This is a test</p>
</div>

JavaScript

$(function() {
  var $diag = $("[id$='dialog']")
  $diag.dialog({
    autoOpen: false,
    position: {
      my: "left top",
      at: "left+30 top-30",
      of: $("[id$='bullAide']")
    },
  });
  $("[id$='bullAide']").click(function(event) {
    $diag.dialog("open");
  });
});

这将帮助您正确定位对话框。该错误可能是由于缺少父级或代码中的 DOM 升序问题造成的。这个精简的代码应该可以工作。我还设置了示例以匹配您的库版本。

【讨论】：