Question

我有一个非常基本的快速设置，以jade作为视图引擎。我的视图的标准模板存储在layout.jade

中

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content
    script(src='https://code.jquery.com/jquery-2.1.3.min.js')
    script(src='/javascripts/global.js')
    script(src="/javascripts/local.js")

然后有一个index.jade文件

extends layout
block content
  h1 Welcome
  script(src="/javascripts/local.js")

这个想法是global.js包含我的每个视图所需的全局设置。 Local.js特定于index.jade。

两个脚本都使用jquery挂钩到document.ready并像这样问候用户：

$(document).ready(function(){
    alert("hello from global.js"); // or local.js
    //...
});

如果两个脚本都包含在layout.jade文件中，则会显示两个警报，但local.js文件只能在本地文件中运行。如果local.js仅包含在index.jade文件中，而不包含在两者中，则根本不显示其问候语。

显然，document.ready不会从第二个jade文件中触发。我无法弄清楚为什么。您可以注册多个回调：jQuery - is it bad to have multiple $(document).ready(function() {});

在这两种情况下，脚本都存在于网站源代码html中。

这是nodejs控制台日志：

GET /index 304 12.661 ms - - 
GET /stylesheets/style.css 304 0.427 ms -- 
GET /javascripts/local.js 304 0.509 ms - - 
GET /javascripts/global.js 304 0.294 ms - -

如果local.js文件包含在第二个jade文件中，为什么不为document.ready触发？

更新

问题是第二个脚本放在html文档的正文中。显然会弄乱事件路由。

现在layout.jade看起来像这样：

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(src='https://code.jquery.com/jquery-2.1.3.min.js')
    script(src='/javascripts/global.js')
    block scripts
  body
    block content

像这样的index.jade：

extends layout
block scripts
    script(src="/javascripts/local.js")
block content
  h1 Welcome

JQuery和Jade，文档就绪没有被调用

0 个答案: