搜索该网站后，我认为我遇到的问题可能与使用innerHTML填充<div>有关，但我找不到可以映射到我的特定问题的解决方案。希望有人能帮忙。基本上，我有一个 HTML 页面，其中包含一个带有文本字段的表单。该页面还包含一个空的 <div>，稍后将填充目录。 <div> 定义为:
<div id="toc_menu" class="menu_list">
我已设置表单文本字段的 onkeyup 属性来运行 Javascript 函数(在 HTML <head> 中定义)，该函数定义 XMLHttpRequest 并使用 xmlhttp.open("GET","toc_items.php?filter="+str,true) 将文本输入字段 (str) 中输入的值发送到 PHP 页面。 PHP 页面获取“filter”的值并运行 MySQL 查询。然后，它会生成一些结果，这些结果会作为包含主标题和副标题的目录回显为空，使用:
document.getElementById("toc_menu").innerHTML=xmlhttp.responseText;
这或多或少符合预期。当在文本字段中输入文本时，返回的目录的长度会发生变化。然而，有一个问题。该目录应该具有使用 HTML <head> 中定义的脚本创建的 Accordion 效果。该脚本由 Roshan Bhattarai 开发，当目录列表被硬编码到 HTML 页面中时，该脚本可以完美地工作。脚本如下:
<script type="text/javascript">
<!--
//---------------------------------+
// Developed by Roshan Bhattarai
// Visit http://roshanbh.com.np for this script and more.
// This notice MUST stay intact for legal use
// --------------------------------->
$(document).ready(function()
{
//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
$("#toc_menu p.menu_head").click(function()
{
$(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(left.png)"});
});
});
</script>
目录项的格式如下:
<p class="menu_head">HEADING</p>;
<div class="menu_body">;
<a href="link-to-relevant-page" target="body_frame">SubHeading</a>';
</div>;
插入 <div> 中的目录项似乎不会触发 HTML 页面 <head> 中的 Javascript(尽管使用也在 <head> 中定义的 CSS 文件正确设置了文本格式)。我可以手动复制 PHP 页面的输出并将其粘贴到 <div> 中， Accordion 效果完美运行。
如有任何建议，我们将不胜感激。
最佳答案
看起来代码块:
<p class="menu_head">HEADING</p>;
<div class="menu_body">;
<a href="link-to-relevant-page" target="body_frame">SubHeading</a>';
</div>;
由 PHP 从 ajax 调用中回显。如果我错了，请纠正我。如果 ajax 调用构建此 html 并将其回显到屏幕，则上述脚本将不起作用。 ajax 调用是通过表单上的 keyup 事件进行的，如上所述。但是，上面的脚本运行于 $(文档).准备好。如果我的理解是正确的，那么当进行ajax调用时，而不是在页面加载时，内容将被放置在div的innerhtml中。因为当页面在 $(document).ready 上加载时，不存在类为“menu_head”的“p”元素，jquery 无法正确绑定(bind) .click 事件。该脚本需要在 ajax 调用返回并且 DOM 已使用新元素更新后执行。
换句话说，从 ajax 调用成功返回后，运行上述脚本，而不是在 $(document).ready 上运行。一旦元素位于 DOM 中，jquery 就可以找到它们并将 .click 事件绑定(bind)到它们。然后脚本执行应该成功完成。
希望这有帮助。
关于Javascript 无法识别使用 XMLHttpRequest 输入到 DIV 中的项目，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12716153/