2013-02-02 1 views
0

저는 Ajax가로드 된 여러 블록 블록이있는 template.htm 페이지를 만들고 있습니다. 나는이 문제에 달려 있기 때문에, 정말 같은 synchronously 일을로드 :jQuery 모듈러 스크립트 아키텍처 - 지연로드 대 인라인로드

$.ajax({ 
     url: 'module.htm' 
    }) 
    .done(function(r) { 
     $('#moduleA').html(r); 
    }); 

나는 여러 다른 module.htm 파일을로드,이 여러 번을한다. 그들 모두는 <!DOCTYPE html>과 헤더, 본문 등을 포함한 표준 html 파일을 가지고 있습니다. 거기에는 jQuery도 많이 있습니다.

문제 :

이 모듈의 일부

는 동적으로 추가 요소는 대부분 문제를 내가 특정 $.fn.myPluginMethod위한 플러그인을 활용이

$.ajax(......) 
.done(function(response) { 
    var item = $.parseJSON(response); 
    // iterating voer the JSON and appending elements 
    $('div').myPluginMethod(); // utilizing the plugin here 
}); 

같은 .append()을 사용하고 나타났습니다 module.htm 헤더에 <script>을 사용하여 플러그인을로드하고 자체적으로 실행합니다. template.htm 외부에서는 모든 것이 올바르게 작동합니다. 콘솔에서 $.fn.myPluginMethod을 입력하면 함수가 반환됩니다.

그러나 module.htm 파일을 부모 template.htm 페이지로로드하면 더 이상 작동하지 않습니다. 콘솔에서 $.fn.myPluginMethod을 입력하면 undefined가 반환됩니다.

의미가 없습니다. Firebug는 플러그인 스크립트가로드 된 것으로 표시하므로 실패할까요?

나의 이론 어떻게 든 내 아약스로드와 관련이 있다고 생각합니다. .done() 메서드는 어떻게 든 플러그인의 객체를 "볼"수 없으므로 unknown method error을 던집니다. 플러그인을 수동으로 붙여 넣으면 작동합니다.

$.ajax(......) 
.done(function(response) { 
    var item = $.parseJSON(response); 
    // iterating voer the JSON and appending elements 
    // I can paste my raw plugin code here and it will work, but that's silly 
}); 

이 아약스 비즈니스가 왜 문제를 일으키는 지 이해하려고합니다. 일단 플러그인이 DOM에로드되면 모든 스크립트 (동적 또는 동적)가 메소드를 "볼"수있을 것이라고 생각했습니다.

감사합니다.

답변

2

원격 파일에서 jQuery.js를 다시로드하는 것처럼 들립니다. 이렇게하면 기본 페이지의 jQuery 객체를 덮어 씁니다. 그러면 초기 jQuery 객체에 등록 된 모든 플러그인이 지워집니다.

+0

yea. 나는 바이올린을 치고 있었고 나는 이것이 올바른 방법이 아니라는 결론에 도달했다. 나 혼자서 모듈을보고 템플릿으로 바꿀 수 있기를 원하지만, 제대로하지는 않습니다. 이것에 대한 최선의 방법이 있어야합니다 ... 아직 발견하지 못했습니다. – tim

+0

페이지 코드가 ajax에 의해로드 될 때 jQuery.js를 포함하지 않도록 서버 코드를 설정하십시오. 서버에 데이터를 보낼 수 있습니다. $ .ajax ({data : {ajax : true}, url : 'module.htm'....'서버에서'ajax' 매개 변수를 확인하십시오. – charlietfl