catch 블록에서 열면 jQuery UI 대화 상자를 닫을 수 없습니다.

Question

내 대화 상자에서 일반적인 모양과 느낌을 얻기 위해 일반적인 오류 대화 상자 기능을 구축했습니다. $.ajaxSetup.error 함수 내에서이 함수를 문제없이 호출합니다. 대화 상자의 호출을 통해 하나의 단추가 추가되었습니다. 내 버튼을 누르면 대화 상자가 닫히고 ajaxSetup.error 함수에서 호출되면 모서리의 X가 창이 닫힙니다.

내 JS 내에서 catch 블록 (NOT Ajax 호출) 대화 상자가 문제없이 열리지 만 내에서이 같은 함수를 호출하려고하면 내가 얻을 대화 상자를 닫습니다 다음과 같은 오류 내 단추를 클릭 할 때 :

을 당신은 내가 $(this)를 사용하여 대화 상자를 닫으려고 내 버튼에서 볼 수 있듯이

function __renderDialogOK(data) { 

    // This call renders the div to be displayed within 
    // the dialog. 
    var divMessage = __renderDialogBase(data); 

    $(divMessage).dialog(
     { 
      width: __getDialogWidth(), 
      resizeable: false, 
      modal: true, 
      hide: true, 
      show: true, 
      buttons: [ 
       { 
        text: "OK", 
        click: function (e) { 
         e.preventDefault(); 
         $(this).dialog("close"); 
         return false; 
        } 
       } 
      ], 
      open: function (e) { 
       $(this).parent().find("button:eq(1)").addClass('ui-state-default'); 
       $(this).parent().find("button:eq(1)").focus(); 
       $(this).on("keydown", function (event) { 
        if (parseInt(event.keyCode) === 13) { 
         $(this).parent() 
          .find("button:eq(1)").trigger("click"); 
         return false; 
        } 

        if (event.keyCode == 27) { 
         $(this).parent() 
          .find("button:eq(1)").trigger("click"); 
         return false; 
        } 
       }); 
      }, 
      close: function (e) { 
       $(this).off("keydown"); 
      } 
     } 
    ); 
} 

: 여기

0x800a138f - JavaScript runtime error: Unable to get property '_focusTabbable' of undefined or null reference

내 대화 상자를 생성하는 코드입니다. 또한 (글로벌) 함수 외부 변수를 사용하여 $(divMessage).dialog( 호출하여 반환 된 컨텍스트를 저장하는 시도했다.

내 고객이 현재 회사 표준으로 사용하고 있기 때문에 불행한 IE11에서만 발생하는 것으로 보입니다. 그래서 마침내 내 질문.

JavaScript 내에서 Catch 블록을 입력 할 때 모든 컨텍스트가 손실됩니까? 이 문제는 이전에 공개되었지만 스레드가 보이지 않고 있습니까? 이 비슷한 오류 메시지에 관한 다른 많은 스레드를 읽었지만 대화 상자가 아직 시작되지 않았기 때문에 내 인스턴스만큼 구체적이지 않은 것처럼 보입니다. 내 것이. 대화 상자가 화면에 나타납니다. 나는 단지 내 버튼으로 그것을 닫을 수 없다. 내 댓글에 확장

Answer 1

,이 검사 것 :

 open: function (e) { 
      $(this).parent().find("button:eq(1)").addClass('ui-state-default'); 
      $(this).parent().find("button:eq(1)").focus(); 
      $(this).on("keydown", function (event) { 
       if (parseInt(event.keyCode) === 13) { 
        $(this).parent() 
         .find("button:eq(1)").trigger("click"); 
        return false; 
       } 

       if (event.keyCode == 27) { 
        $(this).parent() 
         .find("button:eq(1)").trigger("click"); 
        return false; 
       } 
      }); 
     } 

In most cases, the value of this is determined by how a function is called. It can't be set by assignment during execution, and it may be different each time the function is called. ES5 introduced the bind method to set the value of a function's this regardless of how it's called, and ES2015 introduced arrow functions which do provide their own this binding (it remains the this value of the enclosing lexical context).

그래서, open 콜백, $(this)는 open를 호출 한 객체를 참조합니다. 그것은 $(e.target)과 비슷합니다. 따라서 .on()을 통해 keydown 이벤트에 함수를 바인딩하면 $(this)은 더 이상 open 콜백이 아닙니다. keydown 콜백에 대한 참조입니다.

혼란을 피하려면 다른 일을 할 수 있습니다. 여기에 내가 먼저 시도 할 것입니다 :

 open: function (e) { 
      var $me = $(this); 
      var $parent = $(this).parent(); 
      $parent.find("button:eq(1)").addClass('ui-state-default'); 
      $parent.find("button:eq(1)").focus(); 
      $me.on("keydown", function (event) { 
       if (parseInt(event.keyCode) === 13) { 
        $parent 
         .find("button:eq(1)").trigger("click"); 
        return false; 
       } 

       if (event.keyCode == 27) { 
        $parent 
         .find("button:eq(1)").trigger("click"); 
        return false; 
       } 
      }); 
     } 

이것은 적절한 개체에 대한 적절한 참조를 유지하는 데 도움이됩니다.