javascript - Ajax によって div が更新された後、slideToggle が機能しなくなる

Question

コンテナー 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() を使用する代わりに回避策はありますか?