下午好，我完全不知道为什么会发生这种情况。我在网上搜索并试图了解我做错了 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 作为 anchor 标记来调用名为 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 中根本没有显示任何内容。
您能提供的任何帮助都会很棒，因为我完全不知道问题是什么。提前致谢。
最佳答案
我不确定我能否帮助解决实际问题，但您的代码中存在许多问题和不良做法，为了社区的更大利益，我想指出这些问题和不良做法。
这是我对您的代码的看法:
正文中的 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 大多数时候不区分大小写，因此当使用驼峰式命名 ID(例如 fooBar)时，可能会与 foobar 产生混淆> 或 Foobar。相反，仅使用小写字母并使用破折号作为分隔符(就像在 CSS 中一样)。
index.js 中的 JavaScript
我将您的 ready 函数移至 index.js 中。当您已经有一个单独的 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);
});
});
});
不好的做法:在当今的环境中，在 href 中执行 JavaScript 是一个很大的禁忌。即使使用 onclick 属性等也早已过时。
提示:将函数直接传递到 jQuery 是 $(document).ready
提示:使用 console.log() 而不是 alert() 来将从对象到字符串的所有内容输出到日志中(在旧版本中可能会出现错误) IE)
我仍然不知道您的 placement 元素位于何处。也许这就是你的罪魁祸首？如果您对上述内容或其他任何问题有任何疑问，请随时提问。
此外，请查看jQuery Fundamentals对于使用 jQuery 的每个人(从初学者到专业人士)来说，这都是一个很好的资源。
编辑:检查此 jsFiddle上面的演示。
关于javascript - 无法在使用 ajax 的 div 中加载 HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12396901/