Question

Here is my AJAX call:

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

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.

Answer 1

Elements added dynamically to the dom should use .on for jQuery v1.7 and .live/.delegate for older versions.

Please note that for older versions, using .delegate is preferred over using .live

In your case it should be,

Using .on (jQuery v1.7)

$('#news').on ('click', '.deleteItem', function () {
 //delete code
});

For older versions using .delegate, [preferred method]

$('#news').delegate('.deleteItem', 'click', function () {
 //delete code
});

or using .live,

$('.deleteItem').live ('click', function () {
 //delete code
});