slideToggle stops functioning after div got updated by Ajax

slideToggle stops functioning after div got updated by Ajax

I experience an issue where .slideToggle() or .slideUp()/.slideDown() stop
functioning when the container div data get updated by Ajax. Consider this
initial structure:
<ul class="main-container">
<li>
<div class="data-container"><!--display:none; through CSS-->
<p>empty</p>
</div>
</li>
</ul>
And the slideToggle script:
$('.main-container li').click(function(){
$(this).find('div.data-container').slideToggle();
});
Then there is an Ajax update like this:
$('.main-container').replaceWith(data)
The updated structure becomes:
<ul class="main-container">
<li>
<div class="data-container"><!--display:none; through CSS-->
<ol>
<li>data1</li>
<li>data2</li>
</ol>
</div>
</li>
</ul>
Then the slideToggle stops functioning until I reload the page. Is there
any work around rather than using .slideToggle() or
.slideUp()/.slideDown() ?