JavaScript和DOM

Question

我不明白這樣的情況：

我有一個網站模板，並在報頭有代碼：

$(document).ready(function() { 
    $('#header').corner(); 
    ... 
} 

corner()僅僅是一個jQuery的插件功能。但問題是：

("#header") is null 
    $('#header').corner(); 

它工作在主頁面，但在另一個（使用相同的模板） - 不起作用。

要查看所有的行動，請看this頁面。您會看到標題（藍色頂部div）四捨五入，並且在螢幕控制檯中沒有任何錯誤。現在去this頁面。一切正常，但這次不是主頁面（它仍然使用相同的模板文件）。

而third page，錯誤出現在那裏但仍然是相同的模板。怎麼了？

Answer 1

問題是$ is a stupid name a for a function。

在第三頁上，$由jQuery定義並由Prototype重新定義。你正在發生衝突。

首先重寫所有jQuery的東西，使用jQuery而不是$，並調用noConflict。

Answer 2

一個好的解決方案是對你的腳本使用命名空間來避免命名衝突，就像Quentin已經提到的那樣。

您仍然可以通過執行以下操作使用$：

(function($) { 
    //your code goes here and can use $ as jQuery without interfering with Prototype 
} (jQuery)); 

這種方式，你從來沒有直接使用$，同時能夠有選擇地使用$。

Answer 3

如果您輸入到您的console：

$.toString(); 

你會看到一些劇本，地方覆蓋jQuery的快捷方式$。這很可能是該錯誤的原因。爲了解決這個問題，創建一個包裝方面爲你的整個代碼：

(function($) { 
    $(document).ready() { 
     $('#header').... 
    }); 
}(jQuery)); 

這將保證$符號現指的jQuery對象，該函數範圍內。

Answer 4

如前所述，您與Prototype產生名稱衝突。解決這個問題的最簡單方法是：

jQuery(function($) { 
    $('#header').corner(); 
    ... 
});