detect new notification jquery
<p>JS:</p>

<pre><code>$(function() {

$('.click_hide li').click(function() {
    var $list = $("ul.system_messages"),
        $this = $(this);

    $this.slideUp('fast', function() {
        $this.remove();
    });
});

$('.click_show li').click(function() {

    if ($('.click_hide li').is(":visible")) {
        $('.click_hide li').slideUp('fast', function() {
            $('.click_hide li').hide();


        });
    }
    if ($('.click_hide li').is(":hidden")) {
        $('.click_hide li').slideDown('fast', function() {
            $('.click_hide li').show();

        });
    }



});

});​
</code></pre>

<p>HTML:</p>

<pre><code>&lt;ul class="notification click_hide"&gt;
    &lt;li&gt;New product has been purchased&lt;/li&gt;
    &lt;li&gt;Product out of stock&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class = "click_show"&gt;
    &lt;li&gt;Show Notifications&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>CSS:</p>

<pre><code>ul{
    border: 1px solid;   
    cursor: pointer;
}​
</code></pre>

<p>I have this sample notification script that show/hide notifications and delete the field whenever the notification is clicked.</p>

<p>What i want to do is that when new <code>&lt;li&gt;</code> field was inserted dynamically. I want to detect that new field and highlight it for example change the color of the field to red. or produce a text saying the there's a new notification.</p>

<p>jsfiddle: <a href="http://jsfiddle.net/tmL7m/4" rel="nofollow">http://jsfiddle.net/tmL7m/4</a></p>
