确定单击无法正常工作后的JQuery Dialog操作(JQuery Dialog action after ok click not working properly)

确定单击无法正常工作后的JQuery Dialog操作(JQuery Dialog action after ok click not working properly)

我已经创建了一个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'); } } ] }); }

I have made a JQuery Dialog, but for some reason the code which executes, when the 'ok' button is clicked is not functioning properly.

I would like there to be a “Confirm Dialog”, after a person clicks on the edit button which would fundamentally warn the user that they are going to edit something that perhaps they shouldn't be editing.

Furthermore, if the user clicks the “Ok” button, I want the edit input to be editable, whilst hiding the edit button.

Nevertheless, everything else is working the way it should. For example when users click on the close or cancel button, the dialog is closed correctly, and when users clicks on the ok button, the alert works, and the dialog is closed properly. So the only thing that isn't working correctly is the code between the alert and the dialog close.

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

最满意答案

问题是属性名称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'); } }] }); }

The problem was that I was making the actions before closing the dialog.

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