jQuery: link loses its class's clickability when appended
<p>Here is my AJAX call:</p>

<pre><code>    $.ajax({
        type: 'POST',
        url: '&lt;?php echo site_url('channel_partners/cms/get_news'); ?&gt;',
        data: data,
        dataType: 'json',
        success: function(data, status, xhr) {
            var json = JSON.parse(data);
            for (var i=0; i&lt;json.length; i++) {
                $('ul#news').append(
                '&lt;li id="' + json[i].article_id + '"&gt;&lt;a class="deleteItem" title="Delete Item" href="#"&gt;Delete&lt;/a&gt; 
&lt;a id="editItem" title="Edit Item" href="#" target="_blank"&gt;Edit&lt;/a&gt;
 &lt;a href="#" target="_blank"&gt;' + json[i].title + '&lt;/a&gt;&lt;/li&gt;'
               );               
                 }
         },
        error: function(xhr, status, error) {
            //alert('Error: ' + status + ' ' + error);
            console.log(xhr)
        }
    });
</code></pre>

<p>My question is this:  When I have just a regular link with a class of "deleteItem", it fires a deleteItem click event.  The event works fine.  But when the HTML is added programatically through jQuery, the link is not clickable any more.  Why is it not clickable.  It's like jQuery isn't recognizing it.  What do I need to do to make the event fire?  I tried adding the class programatically  but that didn't work. </p>
