jQuery UI：未捕获的TypeError：无法读取未定义的属性'nodeType'

Question

I use jQUery UI Dialog: http://jqueryui.com/dialog/ (that i added manually to a preject web Forms .net) to display a description text on a web page. This is my current code:

.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);
});

Howerver, i have this error : Uncaught TypeError:

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)

I really dont know what is wrong !

Answer 1

Working Example: 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");
  });
});

This will help you position the dialog properly. The error may be a result of a missing parent or issues ascending the DOM in your code. This stripped down code should work. I also set the example to match your library versions.