Remove a programatically added tag using jQuery

Question

Good day,

I have been struggling with this particular piece of code for a while now. Everything I have read and have tried from JQuery as well as Stackoverflow. The main problem is that all answers basically (well which I could find) address already generated HTML or static pages.

My delete code (below), both the commented and uncommented, works perfectly on a page that is created with a static html list.

$(function () {
    //$(".deleteButton").click(function () {
    //    //$(this).closest("li").remove();
    //    jQuery(this).closest('li').fadeOut(400, function () { $(this).remove(); });
    //});
    $('.deleteButton').on({
        click: function () {
            jQuery(this).closest('li').fadeOut(400, function () { $(this).remove(); });
        }
    });
});

However as soon as I use jQuery to add another "li" tag, the delete button only deletes the text within the delete button leaving the "li" on the page.

Here is the code I use to add the "li"

function UpDatePage() {
    $.ajax({
        type: 'GET', url: "NewAdditions", contentType: "application/json", processData: false,
        success: function (data) {
            data = JSON.parse(data);
            for (var key in data) {
                $('.dlList').append(data[key]);
            }
            setTimeout(UpDatePage, 5000);
        }, dataType: "text"
    });
}

data[key] is something like this

'<li class="ui-state-default dlItem" id={0}><table><tr><td style="width:50%"><input type="submit" value="{1}" id={2} onclick="Resume(this.id); return false"/> \
                                        <input type="submit" class="deleteButton" value="Delete" id=del-{2} onclick="Delete(this.id); return false" /> \
                                        <label>{3}</label></td> \
                                    <td style="width:10%; text-align:center" id=per-{2}>{4}</td> \
                                    <td style="width:5%; text-align:center" id=tfs-{2}>{5}</td> \
                                    <td style="width:6%; text-align:center" id=est-{2}>{6}</td> \
                                    <td style="width:5%; text-align:center">{7}</td> \
                                    <td style="width:10%; text-align:center">{8}</td></tr></table></li>'

I really am stuck with this. I have gone through multiple links on this side, read jQuery texts and tried many different permutations of code.

Hopefully someone can help me here or point me in the right direction.

BACKGROUND: I am using python and cherrypy as my back-end and mako for templating. I just mention this for completeness sake as I doubt very much that they are creating the issue I am having as the page is already loaded.

Thanx

Answer 1

For dynamically added html.. you have to handle event delegation a little differently

$(document).on('click','.deleteButton', function(){
});

The document can be replaced with an outer container selector (div or something) which is more advisable.

You could also live but this is deprecated in newer versions

$('.deleteButton').live( 'click', function(){} );

Answer 2

So basicly the problem is that you add the listeners (click) before you append the elements. As a result, listeners are on the elements that were on the page before, not on the new appended one. So in order to do what you want to do, you have to re-assign these listeners, or make them "live". With jQuery 1.9 or higher:

$(document).on('click','.deleteButton', function(){ });

You add the listener on some element on the page that won't change, usually document. jQuery 1.8 or lower:

$('.deleteButton').live('click',function() { });

Or you can add the listener on the appended <LI> in the ajax success callback function. But you would have to make sure and remove previous listeners, so that's a bit more complicated, which mean you should stick to the "live" idea ;)

Hope this helps

Answer 3

An alternative to listening to events that have bubbled up to the document is to bind a click handler to the parent element of your li (which i'm assuming is a ul with the the class .dLlist):

$('.dlList').on('click','.deleteButton', function(){
  // work magic
});

This will allow you to listen on dynamically created content, but avoid the potential messiness of waiting for an event to go all the way up to the document to trigger a handler.