re-apply class to ajax loaded content
<p>Im trying to re-apply classes to new content loaded via ajax.</p>

<p>HTML:</p>

<pre><code>&lt;a href="#" id="link_1"&gt;link_1&lt;/a&gt;
&lt;a href="#" id="link_2"&gt;link_2&lt;/a&gt;
&lt;a href="#" id="link_3"&gt;link_3&lt;/a&gt;
    &lt;a href="#" id="ajax-load"&gt;load more&lt;/a&gt;

&lt;ul id="list"&gt;
    &lt;li class="li-one"&gt;one content&lt;/li&gt;
    &lt;li class="li-two"&gt;two content&lt;/li&gt;
    &lt;li class="li-three"&gt;three content&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Jquery script:</p>

<pre><code>$(document).ready(function() {
            $('#link_1').live('click', function() {
                $('.li-one').addClass('hide');
            });
            $('#link_2').live('click', function() {
                $('.li-two').addClass('hide');
            });
            $('#link_3').live('click', function() {
                $('.li-three').addClass('hide');
            });
            $('#load-ajax').click(function() {
               $.get('http://link', function(data) {
               $('#list').append(data);
        });
    });
});
</code></pre>

<p>Ajax HTML page code:</p>

<pre><code>&lt;li class="li-one"&gt;one content&lt;/li&gt;
&lt;li class="li-two"&gt;two content&lt;/li&gt;
&lt;li class="li-three"&gt;three content&lt;/li&gt;
</code></pre>

<p><strong>ToDo:</strong> </p>

<p>user clicks link_1 -> 'li-one' get 'hidden' class -> user click ajax -> ajax loads BUT all 'li-one' with 'hidden' class</p>

<p>user clicks link_2 -> 'li-two' get 'hidden' class -> user click ajax -> ajax loads BUT all 'li-two' with 'hidden' class</p>

<p>user clicks link_3 -> 'li-three' get 'hidden' class -> user click ajax -> ajax loads BUT all 'li-three' with 'hidden' class</p>

<p>It should work like a filter.</p>
