【问题标题】：jquery not working on other pagesjquery在其他页面上不起作用
【发布时间】：2016-01-03 20:14:30
【问题描述】：

我在网站标题上放置了一个菜单。其中一个菜单链接如下所示：

<a href="#" class="controlpanel-link">&nbsp;Control Panel</a>

我有一个 jQuery 函数应该可以显示一个弹出窗口：

$(document).ready(function(){
    jQuery(".controlpanel-link").click(function() {
        $("#controlpanel").show();
    });
    jQuery("#close-cp").click(function() {
        $("#controlpanel").hide();
    });
});

因为它在页眉中，所以它出现在所有页面上。在索引页面上执行了 jQuery，在其他页面上什么也没有发生，控制台也没有显示任何错误。在这种情况下我该怎么办？
提前谢谢！

【问题讨论】：

检查您是否在所有页面上添加了 JQuery 库链接。
^除了上面所说的divy3993，还要确保所有页面都可以访问这个jQuery函数
它在头文件中，菜单也在哪里。
如果这两个东西都可以访问，你能告诉我们实际的站点/演示，以便我们进一步调查吗？否则，我们只是在黑暗中拍摄。
你是正确调用jQuery的路径，还是链接到jQuery cdn，可能是路径问题

标签： jquery html

【解决方案1】：

在我们开始之前，我会稍微清理一下这段代码。这确保了您在代码中与之交互的 jQuery 对象不会影响其他 javascript，反之亦然。它也是jQuery 中$(document).ready 的简写形式。有关更多信息，请参阅下面的闭包参考。

(function($){
  $(".controlpanel-link").click(function() {
    $("#controlpanel").show();
  });
  $("#close-cp").click(function() {
    $("#controlpanel").hide();
  });
})(jQuery);

有几件事可能会导致这种行为：

如果这是一个单页 Web 应用，则在呈现新视图时，您绑定 click 的元素可能未绑定。
根据您可能拥有的其他 javascript，页面上可能不存在这些元素。

调试

如果您还没有，我建议至少使用您的 javascript 控制台和console.log 语句来查看您的点击事件是否真的被触发了。控制台还会通知您代码可能产生的任何 javascript 错误。如果你能做到，我建议使用断点进行更高级的调试。

参考文献

Javascript 闭包：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

jQuery$(document).ready:https://learn.jquery.com/using-jquery-core/document-ready/

console.log:https://developer.mozilla.org/en-US/docs/Web/API/Console/log

“在代码中设置 javascript 断点 - 在 chrome 中”：Set a javascript breakpoint in code - in chrome?

【讨论】：