1

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

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

我已经设置了表单文本字段的 onkeyup 属性来运行一个 Javascript 函数（在 HTML<head>中定义），该函数定义了一个 XMLHttpRequest 并将在文本输入字段（str）中输入的值发送到一个 PHP 页面，使用xmlhttp.open("GET","toc_items.php?filter="+str,true). 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 页面中的 Javascript <head>（尽管使用也定义在 中的 CSS 文件正确格式化了文本<head>）。我可以手动复制PHP页面的输出并将其粘贴到<div>手风琴效果中。

任何建议将不胜感激。

4

2 回答 2

1

看来代码块：

<p class="menu_head">HEADING</p>;
<div class="menu_body">;
<a href="link-to-relevant-page" target="body_frame">SubHeading</a>';
</div>;

由 ajax 调用中的 PHP 回显。如果我错了，请纠正我。如果 ajax 调用构建此 html 并将其回显到屏幕上，则上述脚本将不起作用。如上所述，ajax 调用是通过表单上的 keyup 事件进行的。但是，上面的脚本是在 $(document).ready 上运行的。如果我的理解是正确的，那么在进行 ajax 调用而不是在页面加载时，内容将放置在 div 的 innerhtml 中。因为当页面在 $(document).ready 上加载时没有类“menu_head”的“p”元素，jquery 无法正确绑定 .click 事件。该脚本需要在 ajax 调用返回并且 DOM 已使用新元素更新后执行。

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

希望这可以帮助。

于 2012-10-03T20:23:08.560 回答
0

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

<div id="toc_menu" class="menu_list"></div>
于 2012-10-03T20:41:38.883 回答