Javascript 无法在ajax中加载的div中加载HTML_Javascript_Jquery_Html_Ajax

Javascript 无法在ajax中加载的div中加载HTML

javascript jquery html ajax

Javascript 无法在ajax中加载的div中加载HTML,javascript,jquery,html,ajax,Javascript,Jquery,Html,Ajax,下午好，我完全不知道为什么会这样。我在网上搜索了5个多小时，试图了解我做错了什么，但没有找到解决办法。情况是这样的我有3个页面index.html、index.js和stuff.html html是主页面，使用jQuery将html页面加载到div中 <html> <head> <script type="text/javascript" src="index.js"></script> </head> <body>

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

我有3个页面index.html、index.js和stuff.html 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>

html页面对我来说很好

在stuff.html中，我有两个div 1.其中一个DIV使用sprite作为锚标记来调用名为actOnStuffoptions的函数

<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.js（位于index.html页面上）中，我有一个函数

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

我的问题是，当我向innerHTML通知placement DIV时，它会显示函数中添加的必要DIV。但是，placement DIV中根本没有显示任何内容

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

之前

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

以前

确保只有一个id=placement的元素，即如果有多个元素，则会失败

还有alertstrHTML的输出是什么；在$'placement'.htmlstrHTML；它输出的字符串正确吗

确保只有一个id=placement的元素，即如果有多个元素，则会失败

还有alertstrHTML的输出是什么；在$'placement'.htmlstrHTML；它输出的字符串正确吗

我不确定我是否能帮助解决实际问题，但为了社区的更大利益，我想指出代码中存在许多问题和错误做法

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

正文中的HTML

糟糕的做法：在href中执行JavaScript在当今的环境中是一个大禁忌。即使使用onclick属性等也早已过时

提示：将函数直接传递到jQuery是$document.ready的缩写

提示：使用console.log而不是alert将从对象到字符串的所有内容输出到日志中，这可能会在旧版IE中给您带来错误

我仍然不知道你的位置元素在哪里。也许那就是你的罪魁祸首？如果您对上述内容或其他任何问题有任何疑问，请随时提问

另外，请查看对于所有使用jQuery的人（从初学者到专业人士）来说，哪一个是一个很好的资源

编辑：查看此示例以了解上述内容。

我不确定我是否能够帮助解决实际问题，但为了社区的更大利益，我想指出代码中存在许多问题和错误做法

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

正文中的HTML

糟糕的做法：在href中执行JavaScript在当今的环境中是一个大禁忌。即使使用onclick属性等也早已过时

提示：将函数直接传递到jQuery是$document.ready的缩写

提示：使用console.log而不是alert将从对象到字符串的所有内容输出到日志中，这可能会在旧版IE中给您带来错误

我仍然不知道你的位置元素在哪里。也许那就是你的罪魁祸首？如果您对上述内容或其他任何问题有任何疑问，请随时提问

另外，请查看对于所有使用jQuery的人（从初学者到专业人士）来说，哪一个是一个很好的资源

编辑：选中此项以演示上述内容。

如果没有加载jquery，代码是否不会在$document的第一个美元处开始崩溃。就绪。。。使用UncaughtTypeError:Object没有方法“ready”？页面加载良好，jquery确实位于index.js之前。很抱歉没有指出在我的示例中，kicker正在使用javascript将innerHTML添加到ajax中的页面。我之所以这么说是因为我能够在actOnStuff函数中更改stuffHolder DIV的背景色，所以我知道它正在拾取事件，但函数中的DIV不会出现在placement DIV中，即使我发出警报，innerHTML显示它们在那里。如果没有加载jquery，代码不会开始崩溃吗在$document的第一个美元处。准备好。。。使用UncaughtTypeError:Object没有方法“ready”？页面加载良好，jquery确实位于index.js之前。很抱歉没有指出在我的示例中，kicker正在使用javascript将innerHTML添加到ajax中的页面。我这么说是因为我能够在actOnStuff函数中更改stuffHolder DIV的背景色，所以我知道它正在拾取事件，但是函数中的DIV不会出现在placement DIV中，即使我发出警报，innerHTML显示它们在那里。placement元素在哪里？请在上创建一个测试用例。您应该为其他人创建一个测试用例来查看问题。在创建缩减时，您自己经常会发现问题。目前看来，您向我们展示的内容似乎没有任何问题。我希望您没有为pl设置显示：无css规则

acement，这提醒了我，到目前为止，你还没有透露任何关于CSS的信息。我以前从未使用过JFIDLE，糟糕的是它是为了工作，我不能把它带回家。放置的css是位置：绝对；顶部：0px；左：30px；宽度：300px；高度：300px；这是所有的位置。javascript函数中的两个DIV仅显示精灵。唯一设置为“无”的是跨度。DIV本身是display:inline块；高度：10px；宽度：10px；背景：url'imageX.jpg'无重复-100px-300px；我可以试着找出jFiddle来制作一个例子。好的，我需要jFiddle的帮助。如何使用它显示3页？有人能帮我一下吗？位置元素在哪里？请在上创建一个测试用例。您应该为其他人创建一个测试用例来查看问题。在创建缩减时，您自己经常会发现问题。从目前的情况来看，你给我们看的东西似乎没有任何问题。我希望你没有显示：没有css规则设置用于放置，这提醒我你到目前为止还没有透露任何关于css的信息，我以前从未使用过JFIDLE，糟糕的是这是为了工作，我不能把它带回家。放置的css是位置：绝对；顶部：0px；左：30px；宽度：300px；高度：300px；这是所有的位置。javascript函数中的两个DIV仅显示精灵。唯一设置为“无”的是跨度。DIV本身是display:inline块；高度：10px；宽度：10px；背景：url'imageX.jpg'无重复-100px-300px；我可以试着找出jFiddle来制作一个例子。好的，我需要jFiddle的帮助。如何使用它显示3页？有人能帮我一下吗？这个部门是唯一有这个名字的部门。strHTML的警报输出是来自开关盒的正确DIV。DIV位置是唯一具有该名称的DIV。strHTML的警报输出是交换机机箱中的正确DIV。感谢英特尔。我将jFiddle的place DIV放在底部的HTML中。这就是要在代码html中放置大小写字符串的地方。很高兴知道href中的javascript是一个很大的禁忌。我将补充这段代码。但是，如果你在中添加id位置为的DIV，我仍然无法让它工作。下面是我为什么要这么做的详细说明。我有一个页面index.html，它使用ajax加载多个html页面。这样想，每个DIV都是一个模块，它做一些不同的事情，并且不相互交互。所以index.html是一个画布，比如说有5个DIV。每个DIV加载不同的内容。所有这些我都要正确装载。除了这个。当我将stuff.html加载到stuff holder DIV中时，页面stuff.html会正确加载。stuff.html中有两个DIV，一个名为my stuff，另一个名为your stuff。在my stuff DIV中是精灵或锚，它们具有调用actOnStuff函数的链接。当用户选择一个链接时，switch case会构建一个字符串，并根据所选内容将该字符串加载到yourstuff DIV中。但事实并非如此。html字符串不会出现在您的stuff DIV中。但，若您向stuff DIV的innerHTML发出警报，html将显示在警报中。为什么它会出现在警报中而在页面上不可见？我刚刚意识到switch语句中包含错误ID的案例应该是我的东西和你的东西，而不是新的和旧的东西。我已经更新了这个示例，还添加了一个指向工作小提琴的链接。希望这有帮助！我发现了我的错误。首先，你是对的，我需要绑定我的点击事件。然而，我仍然没有得到任何结果。然后我注意到我的工作不在行动的范围之内。因此，当html页面在ajax中运行时，我将div DOM对象放在一个变量中，最后我能够与它交互，现在一切都正常了。非常感谢你的帮助，太棒了，谢谢你的情报。我将jFiddle的place DIV放在底部的HTML中。这就是要在代码html中放置大小写字符串的地方。很高兴知道href中的javascript是一个很大的禁忌。我将补充这段代码。但是，如果你在中添加id位置为的DIV，我仍然无法让它工作。下面是我为什么要这么做的详细说明。我有一个页面index.html，它使用ajax加载多个html页面。这样想，每个DIV都是一个模块，它做一些不同的事情，并且不相互交互。所以index.html是一个画布，比如说有5个DIV。每个DIV加载不同的内容。所有这些我都要正确装载。除了这个。当我将stuff.html加载到stuff holder DIV中时，页面stuff.html会正确加载。stuff.html中有两个DIV，一个名为my stuff，另一个名为your stuff。在my stuff DIV中是精灵或锚，它们具有调用actOnStuff函数的链接。当用户选择链接时，switch case会构建一个字符串并将该字符串加载到yourstuff DIV中

取决于您选择的内容。但事实并非如此。html字符串不会出现在您的stuff DIV中。但，若您向stuff DIV的innerHTML发出警报，html将显示在警报中。为什么它会出现在警报中而在页面上不可见？我刚刚意识到switch语句中包含错误ID的案例应该是我的东西和你的东西，而不是新的和旧的东西。我已经更新了这个示例，还添加了一个指向工作小提琴的链接。希望这有帮助！我发现了我的错误。首先，你是对的，我需要绑定我的点击事件。然而，我仍然没有得到任何结果。然后我注意到我的工作不在行动的范围之内。因此，当html页面在ajax中运行时，我将div DOM对象放在一个变量中，最后我能够与它交互，现在一切都正常了。非常感谢你的帮助，太棒了。

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

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

<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>

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