多個jQuery.noConflict（）實例

Question

我正在使用幾個jQuery腳本，其中包括MenuFader（ http://css-tricks.com/examples/MenuFader/ ），Twitter提要和時間戳。 另外，我有幾個Mootools腳本，其中包括Barackslideshow（ http://devthought.com/wp-content/moogets/BarackSlideshow/demo.html ）。 最后，我有一個滾動條，帶有從Twitter主頁獲取的工具提示。

我最初與Jquery MenuFader和Mootools BarackSlideshow發生沖突，但可以通過jQuery.noconflict（）輕松解決此問題； 並將所有對應的$替換為jQuery。

不幸的是，在我添加了Twitter的滾動條之后，Mootools BarackSlideshow和Jquery MenuFader不再起作用。

我試圖實現jQuery.noconflict（）; 然后$ .noconflict（）; 然后var j = jQuery.noconflict（）; 並像以前一樣替換$，但是我無法使腳本正常播放。

非常感謝任何幫助...我整天都在努力。 我對javascript很陌生，但是通過一些持久性就設法解決了大多數問題。 請看下面的腳本：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"     type="text/javascript"></script>
<script src="http://a2.twimg.com/a/1274914417/javascripts/fronts.js" type="text/javascript"></script> 

<script type="text/javascript"> 
//<![CDATA[

      $( function () {

  setTimeout(function() { $(".twtr-widget").append($("<div></div>").attr("class", "twtr-fade")); }, 0);

  (function() {
    var tabIndex = $("[tabindex]:last").attr("tabIndex");
    var setTabIndex = function() {
      $(this).attr("tabindex", ++tabIndex);
    }
    $(".footer-nav a").each(setTabIndex);
    $(".language-select a").each(setTabIndex);
  })();

    $("#signup_submit").scribe({
    event_name: "signup_submit_click",
    experiment: "ab_signup_button",
    bucket: "sign_up"
  }, "www_ab_tests");

  $('#signin_menu').isSigninMenu();

      new FrontPage().init();

      });

//]]>

Answer 1

noConflict很簡單，而且僅用於更改jQuery庫可用的名稱。

這是嘗試與可能也要使用名稱$其他框架更好地協作，但這就是它的全部 。 它不能解決與其他框架之間的任何其他類型的一般沖突。 例如，當一個框架使用jQuery的內部ID標記克隆，更改或刪除一個元素時，可能會確保產生不可思議的怪異錯誤。 當一個頁面與jQuery一樣廣泛且具有侵入性時，在一個頁面上使用多個框架仍然是一個非常糟糕的主意 。 （特別是jQuery 1.3，它涉及到的元素超級混雜。）

同樣，在相同元素上運行的兩個高級插件很可能會發生有害的行為交互。 假設一個插件將一個行為綁定到一個元素，但是另一個插件刪除了該元素以將其替換為漸進增強版本。 或者一個插件嘗試讀取不再具有可見寬度的元素的offsetWidth ，因為另一個插件在其父級上調用了hide() 。

腳本和插件可能偽裝成完全封裝的行為，您可以在不了解它們如何工作的情況下拋出它們，但實際上並非如此。 如果將兩個腳本（尚未設計成可以一起使用）綁定到相同的元素，則它們很可能會干擾或失敗。 嘗試將受不同插件影響的元素彼此分開，以減少這種可能性。