Question

我已经创建了一个JQuery Dialog，但由于某些原因，当单击“ok”按钮时执行的代码无法正常运行。

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

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

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

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');
                    }
                }
            ]
        });
    }

Answer 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');
            }
        }]
    });
}

Answer 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');
                }
            }
        ]
    });
}

确定单击无法正常工作后的JQuery Dialog操作

2 个答案: