javascript 功能在 cakephp 2 中无法正常工作

Question

我正在使用 cakephp 2.9.9，我想使用一个简单的 jquery 函数并包含在 default.ctp 中，但它没有按预期工作。详情如下：

1.I已经下载了JQuery库jquery-3.2.1.js，我的javascript文件名是script.js，我保存了/app/webroot/js 文件夹中的这两个文件。

2.In 我的 default.ctp 文件我添加了以下行 -

echo $this->Html->script('jquery-3.2.1');
echo $this->Html->script('script');
echo $scripts_for_layout;

3.I 想根据当前活动 link 更改我的导航菜单的样式。我的 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.When 我打开我的页面，该页面调用脚本文件（因为 1 在控制台上执行）但它没有调用 jquery 的 .on() 函数。知道为什么会这样吗？

Answer 1

可能是以下原因造成的：

检查您是否在使用它的脚本之前添加了jQuery。反而 console.log(1) 的尝试在控制台中输出 console.log($) 并确保 Jquery 已加载。

通常使用 JQuery 我们将代码放在 ready() 函数中，如 $(document).ready(function() { // code goes here });

检查页面上是否确实存在选择器 #nav a。也许应该是 nav a?

如果您在脚本标签上使用 async/defer 之类的东西，请确保您使用 defer （它保留脚本的顺序）或全部删除并同步加载脚本。

这是一个相当愚蠢的建议，但你真的点击了吗 links？因为你写“它没有调用 .on() 函数 jquery”。顺便说一下，您不会阻止默认行为（在至少在你分享的那段代码中），所以即使一切正常使用 Jquery 和您的代码，将加载一个新页面，您将在当前页面上看不到 link 的样式已更改。你有在点击处理程序中使用 e.preventDefault() - 请注意，在这种情况下，您将应用代码，但默认情况下不会加载新页面 - e.preventDefault() 取消它。相反，您必须通过 AJAX 加载新内容或将 link 保存到变量中，然后在 new/current 选项卡中使用 JS 打开新页面，如 document.location.assign = "link-to-a-new-page" 稍后。

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

Answer 2

我找到了解决这个问题的方法。我没有使用 jquery .on() 函数，而是根据当前 URL 更改 css。我的代码如下-

$(document).ready(function(){
var nav = document.getElementById('nav');
var anchor = nav.getElementsByTagName('a');
var current = location.href;
for (var i = 0; i < anchor.length; i++) {
    if(anchor[i].href == current) {
        anchor[i].className = "active";
    }
}

});

javascript 功能在 cakephp 2 中无法正常工作

javascript function is not working correctly in cakephp 2

javascript

css

php

jquery

cakephp-2.9