JQuery 無法識別 #id 選擇器，似乎依賴於 URL

Question

我正在寫一個 Ruby on Rails 應用程序。 以下 jQuery 代碼包含在 index.html.erb 文件的 head 標簽中，該文件是站點上所有頁面的模板。

<script>
  $(document).ready(function() {
    $("#select_mailshot").click(function () {
      alert('mailshot');
      document.location.href = "/products/1";
    });
    $("#select_blog").click(function () {
      alert('blog');
      document.location.href = "/messages";
    });
    $("#select_contact").click(function () {
      alert('contact');
      document.location.href = "/contacts/1";
    });
  });
</script>

（警報步驟在那里用於調試）

以下 html 代碼在 index.html.erb

<ul>
  <li id="select_mailshot">Mailshot</li>
  <li id="select_blog">Blog</li>
  <li id="select_contact">Contact us</li>
</ul>

這樣做的目的是有效地創建 3 個按鈕。

單擊http://myurl.com/中的任何按鈕時，一切正常。

單擊http://myurl.com/messages中的任何按鈕時（通過中間按鈕訪問此按鈕），一切正常

從http://myurl.com/products/1開始時，它都停止工作（警報不會觸發）。 事實上，當從http://myurl.com/anything/id開始時，它會停止工作。

我已經嘗試解決這個問題幾個小時了，據我所知，工作條件和非工作條件之間的唯一區別是 url。

任何人都可以解釋這里發生了什么嗎？

Answer 1

螢火蟲告訴你什么？ 頁面上是否有 javascript 錯誤？ 如果有，它們是什么？ 您確定 jQuery 庫正確包含在較深的頁面中（即它是相對路徑嗎？）

Answer 2

這是 javascript 內聯嗎？

如果不是，那么鏈接可能是相對的，因此當您嘗試從 messages/40 加載它時，您需要../script.js 。 另一種解決方案是使用絕對 URL ( http://myurl/script.js ) 或虛擬 (/script.js)。

Answer 3

我正在使用 FaceBox 創建模態疊加層，但我不知道為什么會遇到同樣的問題。

我發現在它可見之前，監聽器並沒有被附加到 HTML 元素上。 （如果我查看源代碼，這些項目是可用的，但 jQuery 似乎在它可見之前沒有附加監聽器。）

對於遇到相同問題的任何人，我建議將您的 click() 代碼移動到您要附加的 HTML 元素可見的位置。

此外，我發現按 ID 選擇確實比 class 帶來更多問題。 我不知道為什么。 （不，沒有重復的 ID。）

希望這可以幫助有同樣問題的人！

Answer 4

感謝 cherouvim 和 digitaljoel。

這是因為 javascript 文件相對於當前的 URL 包含在內。

以下內容包含在 head 標簽中

<script type="text/javascript" src="javascripts/jquery-1.3.2.js"></script>

我把它改成

<script type="text/javascript" src="/javascripts/jquery-1.3.2.js"></script>

（注意 src 屬性中額外的“/”），一切都按預期工作。

我在檢查服務器和瀏覽器上的錯誤日志后解決了這個問題。

感覺有點笨，但吸取了教訓。