无法在Ajax的div中加载HTML

Question

Good afternoon, I am at a total loss on why this is happening. 下午好，我完全不知道为什么会这样。 I have searched online and tried to understand what I'm doing wrong for 5+ hours and could find no solution. 我已经在网上进行搜索，并试图了解5个小时以上我做错了什么，但找不到解决方案。 Here is the situation. 这是情况。

I have 3 pages (index.html, index.js, and stuff.html) index.html is the main page and uses jQuery to load an HTML page into a div. 我有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>

The stuff.html page loads just fine for me. stuff.html页面适合我。

Inside the stuff.html I have 2 div's 1. One of the DIV's uses sprites as anchor tags to call a function named actOnStuff(options). 在stuff.html中，我有2个div1。DIV之一使用精灵作为定位标记来调用名为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>

The other DIV is empty but will have innerHTML written to it later. 另一个DIV为空，但稍后将写入innerHTML。

Inside index.js, which sits on the index.html page, I have a function 在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());
}

My problem is that when I alert the innerHTML of the placement DIV it shows that the necessary DIV from the function as added in the alert. 我的问题是，当我警告innerHTML的位置DIV时，它表明从警报中添加的功能中获取了必要的DIV。 HOWEVER, nothing shows up in the placement DIV at all. 但是，放置DIV中什么都没有显示。

Any help you can provide would be wonderful as I am at a total loss as to what the problem is. 您可以提供的任何帮助都是很棒的，因为我对问题所在一无所知。 Thanks in advance. 提前致谢。

Answer 1

I'm not sure I can help solve the actual problem, but there's many issues and bad practices in your code that I'd like to point out for the greater good of the community. 我不确定我是否可以帮助解决实际问题，但是我想指出您的代码中存在许多问题和不良做法，以期为社区带来更大的好处。

Here's my take on your code: 这是我对您的代码的看法：

HTML in body 正文中的HTML

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

HTML in stuff.html 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>

Bad practice: CSS and HTML is most of the time not case-sensitive, so when naming IDs with camelcase such as fooBar , could create confusion with foobar or Foobar . 不良做法：CSS和HTML在大多数情况下都不区分大小写，因此在使用驼峰命名法（如fooBar命名ID时，可能会与foobar或Foobar产生混淆。 Instead, use lowercase only and dash as separator (like in CSS). 相反，仅使用小写字母和破折号作为分隔符（例如CSS）。

JavaScript in index.js index.js中的JavaScript

I moved your ready function into index.js . 我将ready函数移到index.js 。 I don't see a reason why you would want that in your HTML document when you already have a separate JavaScript file. 当您已经有一个单独的JavaScript文件时，我不希望在HTML文档中找到它的原因。

// 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);
            });
        });
});

Bad practice: Executing JavaScript within the href is a big no-no in todays environments. 不好的做法：在当今的环境中，在href执行JavaScript是一个很大的禁忌。 Even using onclick attributes et al is since long outdated. 即使使用onclick属性等，也早已过时。

Tip: Passing a function directly into jQuery is a shorthand for $(document).ready 提示：将函数直接传递到jQuery是$(document).ready的简写。

Tip: Use console.log() instead of alert() to output everything from objects to strings to your log (might give you errors in older IE) 提示：使用console.log()而不是alert()将所有内容（从对象到字符串alert()输出到您的日志（可能会在较旧的IE中给您带来错误）

I still don't know where your placement element is located. 我仍然不知道您的placement元素位于何处。 Perhaps that's your culprit? 也许那是你的罪魁祸首？ If you have any questions about the above or anything else, don't hesitate to ask. 如果您对以上内容有任何疑问，请随时提出。

Also, check out jQuery Fundamentals which is a great resource for everyone using jQuery, from beginners to pros. 另外，请查看jQuery Fundamentals ，这对于从初学者到专业人士使用jQuery的每个人都是一个很好的资源。

Edit: Check this jsFiddle for a demonstration of the above. 编辑：检查此jsFiddle上面的演示。

Answer 2

before 之前

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

you should load jquery library first 你应该先加载jquery库

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

Answer 3

Make sure you only have ONE element with id="placement", IE will fail if you have more than one. 确保只有一个id为“ =“ placement”的元素，如果有多个元素，IE将会失败。
Also what is the output of alert(strHTML); 另外alert(strHTML);的输出是什么alert(strHTML); putted just before $('#placement').html(strHTML); $('#placement').html(strHTML); does it output the string right? 它输出的字符串正确吗？

无法在Ajax的div中加载HTML

问题描述

3 个解决方案

解决方案1
3 已采纳 2012-09-12 23:17:05

解决方案2
1 2012-09-12 22:20:20

解决方案3
0 2012-09-12 22:30:01

无法在Ajax的div中加载HTML

问题描述

3 个解决方案

解决方案1 3 已采纳 2012-09-12 23:17:05

解决方案2 1 2012-09-12 22:20:20

解决方案3 0 2012-09-12 22:30:01

解决方案1
3 已采纳 2012-09-12 23:17:05

解决方案2
1 2012-09-12 22:20:20

解决方案3
0 2012-09-12 22:30:01