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 属性中额外的“/”），一切都按预期工作。

我在检查服务器和浏览器上的错误日志后解决了这个问题。

感觉有点笨，但吸取了教训。