のjQuery-UIダイアログが送信ボタン</p> <p>HTMLをクリックすると表示されませんクリックイベント

Question

私のjQuery-UIダイアログに表示されません。それは私の警告ボックスを表示するが、ダイアログではない、私はどこかでミスを犯したのだろうか？ はまた私のjQueryとjQuery-UI LIBSは

（同じダイアログで、私の "かかわり" ページで同じを持っており、それが働いている）作業している編集：

私のlibs

<script src="/jquery-ui-1.12.1/external/jquery/jquery.js"></script> 
<script src="/jquery-ui-1.12.1/jquery-ui.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

があります。

Answer 1

HTML構造内に存在しないdivにダイアログ機能を適用していますが、javascript/jqueryでも作成しないでください。

あなたはjQueryUIサイト https://jqueryui.com/dialog/

$(document).ready(function() { 
 

 
    $("#PDFdialog").dialog({ 
 
     width: 500, autoOpen: false, resizable: false, draggable: false, 
 
     modal: false, 
 
     title: "pdf", 
 
     buttons: [ 
 
     { 
 
      text: "Annuler", 
 
      click: function() { 
 
       $(this).dialog("close"); 
 
      } 
 
     }] 
 
    }); 
 

 
    $("#pdfsub").click(function(){ 
 
     $("#PDFdialog").dialog("open"); 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<input id="pdfsub" type="button" name="pdfsub" value="PDF"> 
 
<div id="PDFdialog"> 
 
</div>

Answer 2

上の例で見ることができるようにあなたがそれ

にそのダイアログを呼び出すことができますので、あなたはあなたのHTML内でそのIDを持つ要素を持っている必要がありますここであなたは解決策をとる。

$(document).ready(function() { 
 

 
    $("#PDFdialog").dialog({ 
 
     width: 500, autoOpen: false, resizable: false, draggable: false, 
 
     modal: false, 
 
     title: "pdf", 
 
     buttons: [ 
 
     { 
 
      text: "Annuler", 
 
      click: function() { 
 
       $(this).dialog("close"); 
 
      } 
 
     }] 
 
    }); 
 

 
    $("#pdfsub").click(function(){ 
 
     $("#PDFdialog").dialog("open"); 
 
     alert("btn"); 
 
    }); 
 
});

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<input id="pdfsub" type="button" name="pdfsub" value="PDF"> 
 

 
<div id="PDFdialog"> 
 
</div>

希望すると、これが役立ちます。