3

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

<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() ？

4

1 回答 1

2

只需使用：

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

问题是当您替换.main-container原始事件处理程序时不再有效。为了解决这个问题，您将事件侦听器设置为打开并要求它在div内部触发事件document时运行该函数。clickli.main-container

它在这里工作：http: //jsfiddle.net/wXdbL/3/

于 2013-08-18T23:11:36.287 回答