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

【问题标题】：javascript function is not working correctly in cakephp 2javascript 函数在 cakephp 2 中无法正常工作
【发布时间】：2017-08-04 05:45:15
【问题描述】：

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

【问题讨论】：

检查你的浏览器控制台，看看你有什么错误吗？
你正在使用引导程序..
不，控制台上没有显示错误 - @Alive to Die
不，我没有使用引导程序 - @ChandraKumar

标签： javascript php jquery css cakephp-2.9

【解决方案1】：

可能由以下原因引起：

检查您是否在使用它的脚本之前添加了 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 加载新内容或将链接保存到变量中，并在稍后使用 JS （如 document.location.assign = "link-to-a-new-page"）在新/当前选项卡中打开新页面。

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

【讨论】：

【解决方案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";
    }
}

});

【讨论】：