어떻게 이러한 자바 스크립트 파일을 모두 사용할 수 있습니까?

Question

내 index.html 파일 끝에 두 개의 스크립트 파일이 포함되어 있습니다. 파일 중 하나가 jquery로 페이지 컨텐츠를로드합니다. 다른 파일은 jquery라는 홈 페이지에서 탭이있는 내용 영역을 조작합니다. ajax 페이지로드 파일의 파일 다음에 탭된 컨텐츠 영역에 파일을두면 탭이 작동하지만 페이지로드에 대한 ajax가 작동하지 않습니다. 이러한 파일의 순서를 바꾸면 페이지로드 아약스가 작동하지만 탭은 작동하지 않습니다. 무엇이 이것을 일으킬 수 있습니까? 여기

은 탭이 내용에 대한 파일입니다 :

$(document).ready(function(){ 
initialize(); 
}); 

function initialize() { 
//Click on nav to load external content through AJAX 
// $('#topnav a').click(function(e){ 
// e.preventDefault(); 
// $('#pages').load(e.target.href + ' #loadcontent'); //pages finished loading 
// }); //clicked on nav 

    $(function() { 

    $("#tabedarea").organicTabs(); 

    $("tabedarea").organicTabs({ 
     "speed": 200 
    }); 
}); 
} 

(function($) { 

$.organicTabs = function(el, options) { 

    var base = this; 
    base.$el = $(el); 
    base.$navtabs = base.$el.find(".navtabs"); 

    base.init = function() { 

     base.options = $.extend({},$.organicTabs.defaultOptions, options); 

     // Accessible hiding fix 
     $(".hidetabs").css({ 
      "position": "relative", 
      "top": 0, 
      "left": 0, 
      "display": "none" 
     }); 

     base.$navtabs.delegate("li > a", "click", function() { 

      // Figure out current list via CSS class 
      var curList = base.$el.find("a.current").attr("href").substring(1), 

      // List moving to 
       $newList = $(this), 

      // Figure out ID of new list 
       listID = $newList.attr("href").substring(1), 

      // Set outer wrapper height to (static) height of current inner list 
       $allListWrap = base.$el.find(".list-wrap"), 
       curListHeight = $allListWrap.height(); 
      $allListWrap.height(curListHeight); 

      if ((listID != curList) && (base.$el.find(":animated").length == 0)) { 

       // Fade out current list 
       base.$el.find("#"+curList).fadeOut(base.options.speed, function() { 

        // Fade in new list on callback 
        base.$el.find("#"+listID).fadeIn(base.options.speed); 

        // Adjust outer wrapper to fit new list snuggly 
        //var newHeight = base.$el.find("#"+listID).height(); 
        //$allListWrap.animate({ 
        // height: newHeight 
        //}); 

        // Remove highlighting - Add to just-clicked tab 
        base.$el.find(".navtabs li a").removeClass("current"); 
        $newList.addClass("current"); 

       }); 

      } 

      // Don't behave like a regular link 
      // Stop propegation and bubbling 
      return false; 
     }); 

    }; 
    base.init(); 
}; 

$.organicTabs.defaultOptions = { 
    "speed": 300 
}; 

$.fn.organicTabs = function(options) { 
    return this.each(function() { 
     (new $.organicTabs(this, options)); 
    }); 
}; 

})(jQuery); 

그리고 여기에 페이지로드 아약스의 파일입니다 :

// remap jQuery to $ 
(function($){})(window.jQuery); 


/* trigger when page is ready */ 
$(document).ready(function(){ 
    initialize(); 

}); 

function initialize() { 
    //Click on nav to load external content through AJAX 
    $('#topnav a, #bottomnav a').not('#bottomnav #fbcallus a').click(function(e){ 
     e.preventDefault(); 
     $('#pages').load(e.target.href + ' #loadcontent'); //pages finished loading 
    }); //clicked on nav 
    //handle AJAX for left nav 

} 

Answer 1

당신은 이름을 변경 initialize 같은 이름의 전역 함수를 만드는 그 중 하나 또는 단지 하나. 나중에로드 된 파일이 첫 번째 파일을 덮어 씁니다.

Answer 2

문제는 두 함수의 이름이 모두 같은 것입니다. 함수에 두 개의 다른 이름을 사용하십시오. 그러면 두 페이지로드 처리기를 추가 할 필요가 없습니다. 후자의 스크립트에서 단일 페이지로드 처리기를 추가하고 두 개의 메소드를 호출하십시오. 두 함수가 initialize() 및 init2()이고 js 파일이 나중에 사용하는 경우

$(document).ready(function() { 
    initialize(); 
    init2(); 
});