我正在使用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在新/当前选项卡中打开新页面。


很难说更多,因为您只共享了代码的一小部分。

09-17 15:44
查看更多