동적으로로드 된 대화 상자에서 자바 스크립트 실행

Question

javascript가 대화 상자 내에서 올바르게 실행되는 것과 관련하여 som 문제가 있습니다.

다음은 내 scripts.js의 코드 내가 현재 대화 상자 내부에 기본적으로 어떤 자바 스크립트 코드 화재 비록 대화

function LoadDialog(url, title) { 
    var DialogBox = $('<div class="dialog-container"></div>').dialog({ modal: true, autoOpen: false, resizeable: true }).dialog({ width: 500, height: 'auto' }); 
    DialogBox.html('<div class="ajax-load"><img src="/Content/loading.gif" alt="loading"></div>').dialog({ buttons: null, title: 'Loading..' }); 
    DialogBox.dialog('open').load(url, function() { 
     DialogBox.dialog({ title: title, Buttons: null, position: 'center', close: function (ev, ui) { $(this).dialog("destroy"); } }); 
    }); 
} 

$(function() { 
    $('.as-dialog').click(function (e) { LoadDialog($(this).attr('href'), $(this).attr('title')); return false; }); 
}); 

를로드하는 데 사용하는 느릅 나무입니다. 예를 들어, 대화 상자에 눈에 띄지 않는 확인을 사용하여 작은 폼을로드합니다. 아니 몸, 머리 등, 단지 컨테이너 div 및 양식 자체. 기본적으로 유효성 검사는 작동하지 않으며 script.js $ (function() {}) 아래 양식의 이벤트 처리기를 추가하면 실행되지 않습니다. 내가 JS 다음 참조 및 코드 블록을 추가하는 경우는 한 가지 문제와 함께 작동 양식로드 할 :

<script src="/Scripts/libs/jquery.validate.min.js"></script> 
      <script src="/Scripts/libs/jquery.validate.unobtrusive.js"></script> 
      <script type="text/javascript"> 
       $(function() { 
        $('#form_Create').submit(function (e) { 
         e.preventDefault(); 
        }); 
       }); 
      </script> 

위의 코드에 대한 비 기능 검증이 항상 작동하지만 난 대화 상자를 열면 닫을 것입니다 , 다시 열면 preventdefault가 작동을 멈추고 양식이 게시됩니다. 이것은 아마도 스크립트 문제 또는 무언가가 여러 번로드 될 수 있습니까? 비록 'doc ready'코드가 scripts.js (표준 자바 스크립트 함수가 작동하지만)에 배치되면 대화 상자에서 작동하지 않기 때문에 나는 정말로 다른 옵션을 가지고 있지 않습니다. 동적으로로드 된 파일 내에서 javascript로 작업하는 더 좋은 방법이 있습니까? 아니면 신뢰할 수있는 방식으로 작업 할 수 있도록 전체 양식을 상위 페이지에 배치해야합니까? 처리 방법에 대한 의견이 있으십니까?

Answer 1

대화 상자를 열려면 아래의 방법을 설정하는 것은 내 기본 문제를 해결 한 것 같다 그것은로드가 어쨌든 이것을하는 것처럼 보입니다. 하지만이 코드를 통해 나는 여러 번 대화 상자를 열 수 있으며 코드 블럭은 여전히 ​​실행됩니다.

내가로드 된 페이지에서 일부 스크립트 파일을 호출하여 살아야하는지에 관한 내 문제/질문이 있지만 상위로드 된 파일에서 scriptrunning을 활성화하는 더 좋은 방법이 있습니다. 그러나 적어도 모든 것이 잘 작동하는 것처럼 보입니다.

Answer 2

바이올린은 참으로 환영받을 것입니다,하지만 킥오프을 위해 : 우리는 일부 서식을 적용 할 경우

DialogBox.dialog({ title: title, Buttons: null, position: 'center', close: function (ev, ui) { $(this).dialog("destroy"); } }); 

이 라인은 문제가 될 수 있고, 그것을 깰 :

var obj = {}; 
obj.title = title; 
obj.Buttons = null; 
obj.position = 'center'; 
obj.close = function(ev,ui) 
{ 
    $(this).dialog("destroy");//-->this will point to obj!! 
}; 
DialogBox.dialog(obj); 

제 생각에 당신이 원하는 것은 this을 가리키며, 일반적으로 that 또는 _self으로 불리는 것입니다.

obj.close = (function(that) 
{ 
    return function(ev,ui) 
    { 
     that.dialog("destroy"); 
    }; 
})($(this)); 

어쩌면 이것은 당신의 문제가 무엇인지에 무관하지만, 단지 수 :

또는, 당신이 할 수있는 것은, 클로저를 만들 개체가 만든 컨텍스트에 대한 참조를 유지하는 것입니다 안전 측면에서 다음과 같은 이유로 필요)

var Box = $('#dialog-container'); 
    if (Box.length === 0) { 
     Box = $('<div id="dialog-container"></div>').appendTo('body'); 
    } else { Box.empty(); } 

확실 기압 (비어있는 경우 : 바이올린