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>

我在我的scripts.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调用之前那样展开。我可以点击一级链接和它的工作，只是不展开的选择在悬停。

有什么建议吗？

Answer 1

在AJAX调用完成并更新DOM之后，您需要重新初始化插件：

function reloadNavBar() {
    $.get('reloadnavbar', function(response) {
        $('#nav').html(response).droppy();
    });
};

当前代码在AJAX完成之前尝试重新初始化，因为它在回调函数之外。

Answer 2

问题是您的$.get函数可能没有在html更新之前返回，因此您的$('#nav').droppy()没有针对新生成的内容执行。在document.getElementById('nav').innerHTML = response行之后，在回调函数中移动它。