$(document).ready中的内容无法执行

Question

$(document).ready中的内容无法执行

4

我整天都在寻找答案，但却无法弄清楚为什么我 $(document).ready 代码包装器内的代码都无法工作。

layout.jade

!!!5
html
    head
        title #{title}
        link(rel='stylesheet', href='/stylesheets/style.css')
        script(src='http://code.jquery.com/jquery-1.js')
        script.
            $(document).ready(function(){
                alert("working");
                $("#message").html("message set through jquery");
            });
    body
        header
            h1 Sample message here
        .container
            .main-content
                block content
            .sidebar
                block sidebar
        footer
            block foot

landing.jade

extends layout
block content
    p#message Landing page
    #info Info area
block foot
    a(href="https://localhost:8888/logout", title="logout") Logout

控制器：

exports.landing = function(req, res) {
    res.render('landing', {title: 'My Title'});
}

渲染后的HTML：

<!DOCTYPE html><html><head><title>Dashboard</title><link rel="stylesheet" href="/stylesheets/style.css"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){
    $("#message").html("message set through jquery");
});
alert("working");</script></head><body><header><h1>Sample Web App</h1></header><div class="container"><div class="main-content"><p id="message">Landing page</p><div id="info">Info area</div></div><div class="sidebar"></div></div><footer><a href="https://localhost:8888/logout" title="logout">Logout</a></footer></body></html>

控制台错误：我刚刚在页面上检查了控制台，而不是在运行我的Express Web服务器的位置，并发现了一个错误：

Uncaught reference error: $ is not defined

https服务器问题：

主要问题有两个方面：1）我使用的URL与@Joe所认可的不同。2）由于我的Web服务器是在Express中创建的，以https而非http形式存在，因此它拒绝使用@Joe答案中列出的非安全http地址的URL。相反，我需要将其修改为https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js，使得我的https Web服务器可以使用它，正如@Frédéric Hamidi所建议的那样。

- gjw80

3

渲染后的HTML长什么样子？ - gen_Eric

10

"http://code.jquery.com/jquery-1.js" 出现了 404 错误，你可能想使用的是这个： "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"。 - Joe

1

请问能否提供HTML输出的Paste Bin链接？控制台有什么提示信息？谢谢。 - Joe

1

你的控制台有任何错误吗？ - gen_Eric

2

@gjw80，经过再次考虑，请尝试使用https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js作为jQuery脚本的源URL。当主文档通过HTTPS服务时，您的浏览器可能会配置为静默拒绝加载HTTP资源。 - Frédéric Hamidi

显示剩余24条评论

3个回答

2

看看Joe的评论：

"code.jquery.com/jquery-1.js"报404错误 - 你可能想使用这个链接： "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ? – Joe 38分钟前

这很可能是你需要的答案。点赞给Joe。

- dthree

@gjw80，它应该可以工作：http://jsfiddle.net/7V8jy/ 我只是复制了你的“渲染HTML”。 - vp_arth

1

按照他们说的方法更改链接即可。我在 https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js 上进行了更改。

- zishe

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Frédéric Hamidi · Accepted Answer

您的开发环境似乎有些特殊 :)

jQuery脚本加载失败，因为它是通过HTTP服务提供的，而主文档是通过HTTPS服务提供的，而且两个浏览器已被配置为从通过HTTPS服务提供的文档中静默丢弃HTTP请求。

幸运的是，谷歌CDN支持HTTP和HTTPS，所以您只需要在脚本源URL中切换协议：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>