php - AJAX 调用破坏了 .droppy() 导航栏扩展

Question

我遇到了 jquery.droppy() 和 AJAX 的问题。

我有一个 HTML 菜单:

<ul id="nav">
  <li><a id="toplev" href="/viewpage/69">Level 1</a>
    <ul>
      <li><a href="/viewpage/138">Level 2</a>
        <ul>
          <li><a href="/viewpage/149">Level 3-1</a></li>
          <li><a href="/viewpage/150">Level 3-2</a></li>
          <li><a href="/viewpage/148">Level 3-3</a></li>
          <li><a href="/viewpage/139">Level 3-4</a></li>
        </ul>
      </li>
    </ul>                             
  </li>
</ul>

我在 script.js 文件中调用 droppy 函数:

$(function() {
    $('#nav').droppy();
});

一切都很好

我运行 ajax 调用:

function reloadNavBar() {
    $.get('reloadnavbar',function(response) {
           document.getElementById('nav').innerHTML = response; 
        }
    );
    $('#nav').droppy();
};

从而更新菜单:

<ul id="nav">
  <li><a id="toplev" href="/viewpage/69">Level 1</a>
    <ul>
      <li><a href="/viewpage/138">Level 2</a>
        <ul>
          <li><a href="/viewpage/149">Level 3-1</a></li>
          <li><a href="/viewpage/150">Level 3-2</a></li>
          <li><a href="/viewpage/148">Level 3-3</a></li>
          <li><a href="/viewpage/139">Level 3-4</a></li>
          <li><a href="/viewpage/139">Level 3-5</a></li>  //This line added
        </ul>
      </li>
    </ul>                             
  </li>
</ul>

现在菜单不会像 ajax 调用之前那样展开。我可以单击 1 级链接，它可以工作，只是不会在悬停时展开选择。

有什么建议吗？

Answer 1

问题是您的 $.get 函数可能在 html 更新之前尚未返回，因此您的 $('#nav').droppy() 不会针对新的执行生成的内容。将其移至回调函数内的 document.getElementById('nav').innerHTML = response 行之后。