1. ホーム
  2. javascript

[解決済み] エラーです。TypeError: $(...).dialog は関数ではありません。

2022-02-17 18:45:53

質問

基本的な機能としてダイアログを動作させるのに、問題があります。以下は、私のjQueryソースのインポートです。

<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.11.1.js"></script>
<script type="text/javascript" src="scripts/json.debug.js"></script>

Htmlです。

<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>

<script type="text/javascript">
    $("#opener").click(function() {
            $("#dialog1").dialog('open');
    });
</script>

周りの投稿を見ると、ライブラリのインポートの問題のようです。私はJQuery UI Core、Widget、Mouse、Positionの依存関係をダウンロードしました。

何か思い当たることはありますか?

解決方法は?

jQuery UIは必ずフルバージョンを入れてください。また、ダイアログを最初に起動する必要があります。

$(function () {
  $( "#dialog1" ).dialog({
    autoOpen: false
  });
  
  $("#opener").click(function() {
    $("#dialog1").dialog('open');
  });
});
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
 
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />

<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>