确定后JQuery对话框点击无法正常工作

Question

我制作了一个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'); 
        } 
       } 
      ] 
     }); 
    } 

Answer 1

的问题是，我是在关闭对话框之前作出的行动。

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

Answer 2

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