javascript 函数在 cakephp 2 中无法正常工作

Question

我正在使用 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() 函数。知道为什么会这样吗？

Answer 1

可能是以下原因造成的:

1. 检查您是否在使用它的脚本之前添加了 jQuery。反而console.log(1) 尝试在控制台输出 console.log($)并确保已加载 Jquery。
2. 通常使用 JQuery，我们将代码放在 ready() 函数中，例如 $(document).ready(function() {//code goes here });
3. 检查页面上确实存在选择器 #nav a。 也许它应该是 nav a？
4. 如果您在脚本标签上使用诸如 async/defer 之类的东西，请确保 您使用 defer (它保留脚本的顺序)或 全部删除并同步加载脚本。
5. 这是一个相当愚蠢的建议，但你真的点击了吗 链接？因为你写“它没有调用 .on() 函数 jquery”。顺便说一句，你不会阻止默认行为(在 至少在你分享的那段代码中)，所以即使一切正常 使用 Jquery 和您的代码，将加载一个新页面，您将 看不到当前页面上链接的样式已更改。你有 在点击处理程序中使用 e.preventDefault() - 请注意，在这种情况下，您将应用代码，但默认情况下不会加载新页面 - e.preventDefault() 取消它。相反，您必须通过 AJAX 加载新内容或将链接保存到变量中并在新/当前选项卡中使用 JS 打开新页面，如 document.location.assign = "link-to-a-new-page" 稍后。

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