Question

在我的页面上（让我们称之为页面A）我有一个id为customOrderEdit的jQuery对话框。在对话框中，我使用$（“＃customOrderEdit”）加载另一个页面（让我们称之为页面B）.load（“/ url / to / page.php”）。

现在我想使用自定义按钮关闭对话框，但它不会关闭。我尝试了很多东西（在google，stackoverflow等上找到），但它们似乎都没有用。关闭对话框的代码是在页面A还是B上都没关系，只要它关闭我很高兴。

我在第A页上尝试过的代码：

$("body").on('click', '.cancelUpdateOrder', function(){
    console.log("Test"); //it displays the test console log, but it doesn't close
    $("#customOrderEdit).dialog( "close" );
    return false;
});

我在第B页尝试的代码：

$(".cancelUpdateOrder").on('click', function(){
        $('#customOrderEdit').dialog('close');
        return false;
});

我也尝试过以不同方式调用点击功能：

$(".cancelUpdateOrder").click(function(){ }});
$(".cancelUpdateOrder").live('click', function(){ }});
$(".cancelUpdateOrder").on('click', function(){ }});。

结束部分：

$(".ui-dialog").dialog( "close" );
window.parent.$('#customOrderEdit').dialog('close');
$('#customOrderEdit', window.parent).dialog("close");

可能还有一些我不记得了。

有谁知道我做错了什么，能为我提供正确的代码吗？

Answer 1

类选择器可以返回对象列表，然后您可以尝试使用每个进行迭代：

$('.cancelUpdateOrder').each( function () {
    $(this).on('click', function () {
        $('#customOrderEdit').dialog('close');
        return false;
    })
});

如果不起作用，您可以尝试将console.log用于跟踪是否到达正确的元素。

希望有所帮助

Answer 2

我遇到了这个问题并注释掉了正在加载的文件中包含的jquery.js（文件B），即使它与调用文件（文件A）中包含的jquery.js文件完全相同。以下示例将 NOT 工作，除非您在test.php文件中注释掉加载到对话框中的<script src...>标记。

test.html（我使用的是jquery-3.2.1和jquery-ui 1.12.1）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="../css/jquery-ui.css" rel="stylesheet" type="text/css">
    <script src="../js/jquery-3.2.1.js" type="text/javascript"></script>
    <script src="../js/test.js" type="text/javascript"></script>
    <script src="../js/jquery-ui.js" type="text/javascript"></script>

</head>
<body>
<div id="contentsContainer">
    <button id="btnAddClient" name="btnAddClient">Add</button>
</div>
</body>
</html>

test.js

$( document ).ready(function() {

    $("#contentsContainer").on('click', '#btnAddClient', function () {
        var dlg = $("<div id=\"btnAddClientDlg\"/>").dialog({
            title: 'Add New Client',
            modal: true,
            autoOpen: false,
            width: 720,
            height: 420,
            buttons: {
                Save: function () {
                    $.post("../php/test.php");
                    $('#btnAddClientDlg').dialog('destroy').remove();

                },
                Close: function () {
                    $('#btnAddClientDlg').dialog('close');
                }
            }
        });
        dlg.load("../php/test.php");
        dlg.dialog('open');
    });
});

test.php的

<!DOCTYPE html>
<header>
    <script src="../js/jquery-3.2.1.js" type="text/javascript"></script>
</header>
<?php
    echo "hello";
?>

jQuery对话框不会关闭（使用.load数据）

2 个答案: