为什么在Click上定义的函数会在页面加载时运行？

Question

这是我第一次在stackOverflow上发帖,我真的希望我不要搞砸了.

我正在使用Compass,Foundation和jQuery构建一个网站,我的代码有问题:

$(document).ready(function(){
    function navOn(){
        //var navWidth = $('nav').outerWidth();
        //var contentWidth = $('.feed').outerWidth();
        $('.innerWrap').toggleClass('is-nav');
        $('.post').toggleClass('is-nav');
        $('.nav-main').toggleClass('is-nav');
        console.log("fu");
    };
    $('#tempSwitch').click(navOn());

    if($('.nav-main').hasClass('is-nav')){
        $('.feed').click(navOn());
    }

    $('.nav-menu a').on('click', function(){
        $('.nav-menu a').removeClass('is-active');
        $(this).addClass('is-active');
    })
});

当我加载文档时,我得到两个控制台日志(意味着函数运行了两次),但是当我实际单击我指定的触发器时没有任何反应.

关于为什么这不起作用的任何想法？

编辑: 非常感谢您的回答.

但是,我试图理解为什么,当我打开控制台并尝试运行navOn()时,我得到ReferenceError:navOn未定义

也,

if ($('.nav-main').hasClass('is-nav')){
    $('.feed').click(navOn);
}

似乎没有用.

非常感谢你提前

Answer 1

在单击绑定中,您应该传递对navOn函数对象的引用.目前,您正在调用该navOn函数,并将result(undefined)传递给click()绑定程序,这显然不会起作用.

您只需从以下用法中删除括号navOn():

...
$('#tempSwitch').click(navOn); // <= here
if ($('.nav-main').hasClass('is-nav')){
    $('.feed').click(navOn); // <= and here
}
...