Question

搜索过该网站后，我认为我遇到的问题可能与使用innerHTML填充<div>有关，但我无法找到可以映射到我的具体问题的解决方案。希望有人能提供帮助。基本上，我有一个HTML页面，其中包含一个带有文本字段的表单。该页面还包含一个空的<div>，其中将立即填充一个目录。 <div>定义为：

<div id="toc_menu" class="menu_list">

我已经设置了表单文本字段的onkeyup属性来运行定义XMLHttpRequest的Javascript函数（在HTML <head>中定义），并将在文本输入字段（str）中输入的值发送到使用xmlhttp.open("GET","toc_items.php?filter="+str,true)的PHP页面。 PHP页面获取'filter'的值并运行MySQL查询。然后它产生一些结果，这些结果作为带有主标题和副标题的目录回显给空白：

document.getElementById("toc_menu").innerHTML=xmlhttp.responseText;

这正如预期的那样或多或少地起作用。返回的目录表的长度随着文本输入文本字段而更改。然而，存在一个问题。这个目录应该具有使用HTML <head>中定义的脚本创建的手风琴效果。该脚本由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（尽管使用CSS文件也正确定义了文本格式在<head>）。我可以手动复制PHP页面的输出并将其粘贴到<div>中，并且手风琴效果可以很好地工作。

任何建议都将不胜感激。

Answer 1

似乎是代码块：

<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无法正确绑定.click事件。在ajax调用返回并且使用新元素更新DOM之后，需要执行脚本。

换句话说，从ajax调用成功返回后，运行上面的脚本，而不是$（document）.ready。一旦元素在DOM中，jquery就可以找到它们并将它们绑定到.click事件。然后，脚本执行应该成功完成。

希望这有帮助。

Answer 2

我没有详细研究过你的代码，但是注意到你的空 div 元素没有关闭标记（除非你省略了这个细节）。你应该总是有一个关闭标记（对于 div 元素），以确保DOM没有对应该插入的位置做出无效的假设，使用：

<div id="toc_menu" class="menu_list"></div>

Javascript无法识别使用XMLHttpRequest输入DIV的项目

2 个答案: