jQuery-ui 对话框不显示在点击事件上答案

【问题标题】：jQuery-ui dialog don't show on click eventjQuery-ui 对话框不显示在点击事件上
【发布时间】：2018-04-04 23:06:53
【问题描述】：

点击提交按钮时，我的 jQuery-ui 对话框不显示

html：

<input id="pdfsub" type="button" name="pdfsub" value="PDF">

Javascript

 $(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");
    });
});

它显示了我的警告框，但没有显示对话框，我是不是在某个地方出错了？我的 jQuery 和 jQuery-ui 库也在工作（在我的“连接”页面中具有相同的对话框并且它正在工作）

编辑：

有我的库

<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>

【问题讨论】：

是您在
中的输入按钮
是的，要我编辑吗？
您的代码应该可以工作：jsfiddle.net/z_acharki/ymssceqv/193
您的代码运行良好。 jsfiddle.net/ymssceqv/194 可能是你在代码中漏掉了库。
在您的共享 HTML 中没有 #PDFdialog

标签： javascript jquery jquery-ui jquery-ui-dialog

【解决方案1】：

您正在将对话框功能应用于您的 HTML 结构中不存在的 div，并且您也没有在 javascript/jquery 中创建它。

因此，您的 html 中必须有一个具有该 id 的元素，以便您可以在其上调用该对话框

正如您在 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>

【讨论】：