Question

我遇到一个问题，当.slideToggle（）或.slideUp（）/。slideDown（）在Ajax更新容器div数据时停止运行。考虑这个初始结构：

<ul class="main-container">
  <li>
    <div class="data-container"><!--display:none; through CSS-->
      <p>empty</p>
    </div>
  </li>
</ul>

还有slideToggle脚本：

$('.main-container li').click(function(){
    $(this).find('div.data-container').slideToggle();
});

然后有一个像这样的Ajax更新：

$('.main-container').replaceWith(data)

更新的结构变为：

<ul class="main-container">
  <li>
    <div class="data-container"><!--display:none; through CSS-->
      <ol>
        <li>data1</li>
        <li>data2</li>
      </ol>
    </div>
  </li>
</ul>

然后slideToggle停止运行，直到我重新加载页面。是否有任何工作而不是使用.slideToggle（）或.slideUp（）/。slideDown（）？

Answer 1

只需使用：

$(document).on('click', '.main-container li', function(){
    $(this).find('div.data-container').slideToggle();
});

问题在于，当您替换.main-container时，原始事件处理程序不再有效。要解决此问题，请在document上设置事件侦听器，并要求它在click div内的li上触发.main-container事件时运行该函数。

这里有效：http://jsfiddle.net/wXdbL/3/

在Ajax更新div后，slideToggle停止运行

1 个答案: