ok 클릭 후 JQuery 대화 상자가 제대로 작동하지 않습니다.

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

문제는 내가 대화 상자를 닫기 전에 작업을하게 된 것이 었습니다.

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 인 경우입니다.

코드 attr 대신 prop를 사용하여 :

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