Question

我正在尝试学习一些网络编程，我遇到了这个问题。

我在我的网站上使用FullCalendar，并将日历创建在单独的JavaScript文件中。那是funktiot.js。然后我有我的index.php文件，其中包括第一个JQuery，然后是我的funktiot.js。之后我调用我的日历创建功能。但是它只在我将包含和方法调用放入body时才有效。

例如，这不起作用

<li class="sport-wrapper">
    <a href=".php">Sports </
    <ul class="sports">
     <li><a href=".php">Football</a></li>
     <li><a href=".php">Rugby</a></li>
     <li><a href=".php">Hockey</a></li>
     <li><a href=".php">Golf</a></li>
     <li><a href=".php">Tennis</a></li>
   </ul>
</li>



.sports {
    display: none;
    padding: 0;
    position: absolute;
}
.sport-wrapper:hover .sports {
    display: block;
}



 #nav .sports li {
    display: block;
 }
 #nav li {
    display: inline-block;
 }

但是这样做

<head>
  <script src='libs/fullcalender/lib/jquery.min.js'></script>

  <script src="libs/bootstrap/js/bootstrap.js"></script>

  <script src='libs/fullcalender/lib/moment.min.js'></script>
  <script src='libs/fullcalender/fullcalendar.js'></script>
  <script src="libs/fullcalender/lang/fi.js"></script>

  <script src="js/funktiot.js"></script>

  <script type='text/javascript'>
      $(document).load(luoKalenteri("#calendar", <?php echo $_GET["id"]; ?>));
  </script>
</head>

<body>
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
         <div id='calendar'></div>
    </div>
</body>

我认为第一个可以使用$（document）.load并在其他所有内容之前包含JQuery吗？我做错了什么？

Answer 1

您的代码必须在页面初始化完成后执行。

Jquery有一个缓解问题的功能：

$( document ).ready()

http://learn.jquery.com/using-jquery-core/document-ready/

如上所述：“在文档”准备好“之前，页面无法安全操作.jQuery会为您检测此状态。$（document）.ready（）中包含的代码只会在页面运行一次文档对象模型（DOM）已准备好执行JavaScript代码。“

Answer 2

$(document).load(luoKalenteri("#calendar", <?php echo $_GET["id"]; ?>))

这不会起作用。从内到外打破它：

var result = luoKalenteri("#calendar", <?php echo $_GET["id"]; ?>);
// result => undefined
$(document).load(result);
// Or
$(document).load(undefined);

由于解析头部时#calendar尚未就绪，luoKalenteri可能会崩溃或无效。

相反，你应该将一个函数而不是函数调用的结果传递给load()：

$(document).load(function() {
  luoKalenteri("#calendar", <?php echo $_GET["id"]; ?>);
});

Off-Topic nitpick

在代码中间注入PHP是不好的形式。它使可读性变得困难，并且在尝试调试时可能是令人头疼的问题。最好将所有PHP注入推送到这样的中心位置：

<script>
  var CONFIG = {
    calendarId: <?php echo $_GET["id"]; ?>
  };
</script>
<script>
  $(document).load(function() {
    luoKalenteri("#calendar", CONFIG.calendarId);
  });
</script>

Answer 3

尝试使用$(document).ready(function() {});

<强>原因：
基本上你的javascript代码甚至在页面完全加载之前运行，并且在放入头部时创建DOM。

Answer 4

只需将代码包装成这样：

jQuery(document).ready(function() {
    // write your code here
});

通过执行此操作，您的代码将在DOM加载后执行！

Answer 5

您应该始终将脚本标记放在身体的底部。它使页面加载缓慢，如果在顶部，所以你真的没有问题。

代码仅在我将其放入体内而不是头部时才起作用

5 个答案:

Off-Topic nitpick