jQuery UI : Uncaught TypeError : 정의되지 않은 'nodeType'속성을 읽을 수 없습니다.

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

Howerver, 나는이 오류가 : catch되지 않은 형식 오류 : 정말 해달라고

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> 

자바 스크립트는

$(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을 오름차순으로 표시 한 결과 일 수 있습니다. 이렇게 제거 된 코드는 작동합니다. 또한 라이브러리 버전과 일치하는 예제를 설정합니다.