Question

下午好，我完全不知道为什么会这样。我在网上搜索过并试图了解我在5个多小时内做错了什么并且找不到解决办法。情况就是这样。

我有3页（index.html，index.js和stuff.html） index.html是主页面，使用jQuery将HTML页面加载到div中。

<html>
<head>
  <script type="text/javascript" src="index.js"></script>
</head>
<body>
  <div id="stuffHolder"></div>
  <script type="text.javascript">
    $(document).ready(function(){
      $('#stuffHolder').load('stuff.html');
    });
  </script>
</body>
</html>

stuff.html页面加载就好了。

在stuff.html里面我有2个div 1.其中一个DIV使用sprite作为锚标记来调用名为actOnStuff（options）的函数。

<div id="myStuff"><a class="myStuffSprite" href="Javascript:actOnStuff('newStuff')"><span>New Stuff</span></a></div>
<div id="yourStuff"><a class="yourStuffSprite" href="Javascript:actOnStuff('oldStuff')"><span>Old Stuff</span></a></div>

另一个DIV是空的，但稍后会写入innerHTML。

在index.html页面内的index.js中，我有一个函数

function actOnStuff(youSelected){
  strHTML = "";
  switch(youSelected){
    case "newStuff":
      strHTML += "<div id='newDIV'><span>You selected New</span></div>";
      break;
    case "oldStuff":
      strHTML += "<div id='oldDIV'><span>You selected Old</span></div>";
      break;
  }
  $('#placement').html(strHTML);
  alert($('#placement').html());
}

我的问题是，当我提醒放置DIV的innerHTML时，它会显示警报中添加的函数所需的DIV。但是，DIV中根本没有显示任何内容。

你能提供的任何帮助都会很棒，因为我完全不知道问题是什么。提前谢谢。

Answer 1

我不确定我是否可以帮助解决实际问题，但是您的代码中存在许多问题和不良做法，我想指出这些问题是为了社区的更大利益。

以下是我对您的代码的看法：

正文中的HTML

<div id="stuff-holder"></div>

在stuff.html中的HTML

<div id="my-stuff">
    <a class="my-stuff-sprite" href="#"><span>New Stuff</span></a>
</div>
<div id="your-stuff">
    <a class="your-stuff-sprite" href="#"><span>Old Stuff</span></a>
</div>

不良做法：CSS和HTML大多数情况下都不区分大小写，因此在使用fooBar等camelcase命名ID时，可能会与foobar或{{1}产生混淆}。相反，仅使用小写和破折号作为分隔符（如在CSS中）。

index.js中的JavaScript

我已将Foobar功能移至ready。当您已经有一个单独的JavaScript文件时，我没有看到您在HTML文档中想要的原因。

index.js

不良做法：在// Shorthand for ready $(function(){ // Cache the selector var $placement = $("#placement"); // Put function in the local scope so we don't clutter the global scope function actOnStuff(youSelected) { // Not declaring variables with var, makes it global (bad idea!) var html = ""; switch (youSelected) { case "my-stuff": html += '<div id="new-div"><span>You selected New</span></div>'; break; case "your-stuff": html += '<div id="old-div"><span>You selected Old</span></div>'; break; } // Put new html in placement element $placement.html(html); // Use console.log to debug your code instead of alert console.log($placement.html()); } // Load stuff into stuff holder and bind event handler to load event $("#stuff-holder") .load("stuff.html") .on("load", function() { // After it has loaded, bind click events $("#my-stuff .my-stuff-sprite, #your-stuff .your-stuff-sprite").click(function(e) { // Prevent default click behavior e.preventDefault(); // Get id of parent var id = $(this).parent()[0].id; // Execute function actOnStuff(id); }); }); });内执行JavaScript在当今环境中是一个很大的禁忌。即使使用href属性等，也很久了。

提示：将函数直接传递给jQuery是onclick

的简写

提示：使用$(document).ready代替console.log()输出从对象到字符串到日志的所有内容（可能会在旧IE中出错）

我仍然不知道您的alert()元素位于何处。也许那是你的罪魁祸首？如果您对上述内容或其他任何问题有任何疑问，请随时提出。

另外，查看jQuery Fundamentals这对于使用jQuery的每个人来说都是一个很好的资源，从初学者到专业人士。

修改：查看此jsFiddle以了解上述内容。

Answer 2

前

<script type="text/javascript" src="index.js"></script>

您应首先加载jquery库

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="index.js"></script>

Answer 3

确保您只有一个id =“placement”的元素，如果您有多个元素，IE将会失败。
alert(strHTML);之前推出的$('#placement').html(strHTML);的输出输出字符串是什么？

无法在ajax中的div中加载HTML

3 个答案: