jQuery $.ajax is not appending a returned HTML from the server
<p>I have a very strange problem with that code. The situation is well known - async load a page via <code>$.ajax()</code>. But the problem is, I can use that code only 4 times (after edit: 8 times), after that the result from the server is not being appended. What's wrong ?</p>

<h2>Edit</h2>

<p>The situation: before the 4th time the returned HTML is being appended, but after the 4th time the same HTML is not being appended.</p>

<pre><code>$('a.menu-item').click(function () {
     loadContent($(this).attr('href'));
});

    function loadContent(hash) {
                window.location.hash = hash;

                $.ajax(
                {
                    url: '/MyAction/' + hash.replace('#', ''),
                    type: 'post',
                    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
                    cache : false,
                    success: function (res) {
                                appendData(res);
                            },
                    complete: function(xhr, textStatus) {
                        if(xhr.status == '404') {
                            alert('not found');
                        }
                    } 
             });
    }

function appendData(res) {
        $('#myContent').remove();
        $('&lt;div id="myContent" class="inner-container"&gt;'+res+'&lt;/div&gt;')
        .appendTo('#mainContainer');
    }
</code></pre>
