确定单击后的 JQuery 对话框操作无法正常工作答案

【问题标题】：JQuery Dialog action after ok click not working properly确定单击后的 JQuery 对话框操作无法正常工作
【发布时间】：2014-01-15 11:40:31
【问题描述】：

我制作了一个 JQuery 对话框，但由于某种原因，当单击“确定”按钮时执行的代码无法正常运行。

我希望有一个“确认对话框”，在用户单击编辑按钮后，它会从根本上警告用户他们将要编辑一些他们可能不应该编辑的内容。

此外，如果用户单击“确定”按钮，我希望编辑输入是可编辑的，同时隐藏编辑按钮。

尽管如此，其他一切都在按应有的方式工作。例如，当用户单击关闭或取消按钮时，对话框正确关闭，当用户单击确定按钮时，警报起作用，对话框正确关闭。所以唯一不能正常工作的是警报和对话框关闭之间的代码。

function ShowDialogBox(title, content) {
        $("#lblMessage").html(content);
        $("#dialog").dialog({
            resizable: false,
            title: title,
            modal: true,
            width: '400px',
            height: 'auto',
            bgiframe: false,
            hide: { effect: 'fade', duration: 400 },
            buttons: [
                {
                    text: 'OK',
                    "class": 'showcss',
                    click: function () {
                        alert('hello');
                        $("#edit_input").attr("readonly", false);
                        $("#edit_input").focus();
                        $('#edit_button').hide();               
                        $("#dialog").dialog('close');
                    }
                },
                {
                    text: 'Cancel',
                    "class": 'showcss',
                    click: function () {
                        $("#dialog").dialog('close');
                    }
                }
            ]
        });
    }

【问题讨论】：

问题是输入仍然是只读的？
究竟是什么不起作用？

标签： javascript jquery dialog

【解决方案1】：

问题在于属性名称readOnly 区分大小写。

使用prop 代替attr 的代码：

function ShowDialogBox(title, content) {
    $("#lblMessage").html(content);
    $("#dialog").dialog({
        resizable: false,
        title: title,
        modal: true,
        width: '400px',
        height: 'auto',
        bgiframe: false,
        hide: {
            effect: 'fade',
            duration: 400
        },
        buttons: [{
            text: 'OK',
                "class": 'showcss',
            click: function () {
                alert('hello');
                $("#edit_input").prop("readOnly", false);
                $("#edit_input").focus();
                $('#edit_button').hide();
                $("#dialog").dialog('close');
            }
        }, {
            text: 'Cancel',
                "class": 'showcss',
            click: function () {
                $("#dialog").dialog('close');
            }
        }]
    });
}

【讨论】：

【解决方案2】：

问题是我在关闭对话框之前进行了操作。

function ShowDialogBox(title, content) {
    $("#lblMessage").html(content);
    $("#dialog").dialog({
        resizable: false,
        title: title,
        modal: true,
        width: '400px',
        height: 'auto',
        bgiframe: false,
        hide: { effect: 'fade', duration: 400 },
        buttons: [
            {
                text: 'OK',
                "class": 'showcss',
                click: function () {
                    $("#dialog").dialog('close');
                    $("#edit_input").attr("readonly", false);
                    $("#edit_input").focus();
                    $('#edit_button').hide();                                       
                }
            },
            {
                text: 'Cancel',
                "class": 'showcss',
                click: function () {
                    $("#dialog").dialog('close');
                }
            }
        ]
    });
}

【讨论】：