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调用之前那样扩展。我可以单击1级链接并且它可以正常工作，只是不会在悬停时扩展选择。

有什么建议吗？

Answer 1

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

Answer 2

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

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

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

AJAX调用中断.droppy（）navbar扩展

2 个答案: