javascript - jQuery 用户界面 : Uncaught TypeError: Cannot read property 'nodeType' of undefined

Question

我使用 jQUery UI 对话框:http://jqueryui.com/dialog/ (我手动添加到项目 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)

我真的不知道出了什么问题!

Answer 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 提升问题造成的。这个精简的代码应该可以工作。我还设置了示例以匹配您的库版本。