我正在使用cakephp 2.9.9,我想使用一个简单的jquery函数并包含在default.ctp中,但是它没有按预期工作。详细信息如下:
1.我已经下载了JQuery库jquery-3.2.1.js,我的javascript文件名为script.js,我将这两个文件保存在/ app / webroot / js文件夹中。
2.在我的default.ctp文件中,添加了以下几行-
echo $this->Html->script('jquery-3.2.1');
echo $this->Html->script('script');
echo $scripts_for_layout;
3.我想根据当前活动链接更改导航菜单的样式。我的script.js文件如下-
(function(){
console.log(1); //this can be seen on console
$("#nav a").on("click", function(e){
console.log(2); // this cannot be seen on console
$("#nav a").removeClass('active');
$(e.currentTarget).addClass('active');
});
})();
4.当我打开页面时,页面会调用脚本文件(因为在控制台上执行了1),但是没有调用jquery的.on()函数。知道为什么会这样吗?
最佳答案
这可能是由于以下原因引起的:
检查是否在使用jQuery的脚本之前添加了jQuery。代替console.log(1)
的尝试在控制台console.log($)
中输出
并确保已加载Jquery。
通常,我们使用JQuery将代码放入ready()
函数(如$(document).ready(function() { // code goes here });
检查选择器#nav a
在页面上是否确实存在。
也许应该是nav a
?
如果您在脚本标签上使用async/defer
之类的内容,请确保
您使用defer
(保留脚本的顺序)或
将其全部删除并同步加载脚本。
这是一个愚蠢的建议,但是您是否真的点击了
链接?因为您写的是“它没有调用.on()函数
jquery”。顺便说一句,您不会阻止默认行为(在
至少在您共享的代码中),即使一切正常
使用Jquery和您的代码,将加载一个新页面,您将
看不到当前页面上更改的链接样式。你有
在点击处理程序中使用e.preventDefault()
-请注意,在这种情况下,您将应用代码,但默认情况下不会加载新页面-e.preventDefault()
取消它。取而代之的是,您必须通过AJAX加载新内容,或将链接保存到变量中,然后使用document.location.assign = "link-to-a-new-page"
之类的JS在新/当前选项卡中打开新页面。
很难说更多,因为您只共享了代码的一小部分。