Dynamically added HTML does not dynamically remove with JQuery in Cakephp

Question

Hi,

We have a part list in the "garagecar/view/index.ctp" view page. The part list is populated with PHP when the page is first loaded. Each part has a remove button. When the user clicks "remove", the controller link removes the part while the JQuery/Ajax removes the HTML that displays the part in the index:

$html->link(__('remove', true),
            array('controller'=>'garage_parts',
                  'action'=>'delete',
                  $gpart['GaragePart']['id']),
            array('class'=>'js-ajax remove_part'));
$(".remove_part").click(function(){
    var answer = confirm("Remove this part?");
    if (answer){
        var partdiv = $(this).parent().parent();
        $.ajax({
            type: "post",
            url: this.href,
        });
        $(partdiv).remove();
    }
    return false;
});

When the user wants to dynamically add a new part we use the JQuery $().load function to load "garagepart/view/addpart.ctp". In addpart.ctp, there is a $().ajax function that adds the part via JSON and appends the new part's HTML to the part list in index.ctp.

However, if you click the remove button on this new part, the above JQuery function does not evaluate. The function fails to remove the HTML, even though it is structured exactly the same as the parts preloaded with PHP. The Cakephp remove link still works, so the part is gone if you reload the page.

Why is the JQuery not dynamically removing the part that is dynamically added? The remove only works on parts that were preloaded with PHP and not the new ones that are added via JQuery/Ajax. Please let me know if you need me to post more code... thanks!

Answer 1

Hi,

Your problem can be solved using live() funcion in jQuery, wich basically works like click() but "listen" the changes in the markup and apply to the new elements that are added before the ajax call the functions you want.

http://docs.jquery.com/Events/live

Answer 2

I've tried changing everything to live() and it still doesn't work. can someone help me troubleshoot why this live thing doesnt work? or perhaps explain to me how I can use the bind function?

Answer 3

What I usually do:

1. Create a function that binds the event to the elements (bind_remove())
2. Just after the ajax call that creates the new content call bind_remove() that should make the new elements work (i.e. in the callback).
3. Add the bind_remove() function in the jQuery(document).ready(function() {}); that should make the elements loaded from start work.

Here's what my bind_remove() looks like for a page:

function bind_remove() {
/* bind remove function */
    $('img[class="examremover"]').bind('click', function () {
        var id = $(this).attr('rel');
        $('#exrow'+id).remove();
        var examenes = $('#ReferenciaExamenes').val();
        examenes = examenes.replace(id, '');
        $('#ReferenciaExamenes').val(examenes);

        $('#referencia'+id).remove();
        return false;
    });

}

I do this for both add and remove (separated functions) and that works just fine.

Answer 4

What you can use is the livequery plugin from jQuery which you can get from here: http://docs.jquery.com/Plugins/livequery and change the following line in your code:

FROM: $(".remove_part").click(function() {

TO: $(".remove_part").livequery('click', function() {

This will monitor dynamically added form elements and automatically bind the click even to it. Hope that helps!