jQuery impossible action on items from append ()

Question

I try to make some action on element from append() but it's impossible :

My html :

<table id="PA"> 
 <tbody>
  <tr>
   <td><input type="text" class="argument" /></td>
   <td><input type="button" class="less" value="-"/></td>
   <td><input type="text" class="note" disabled="disabled" value="0"/></td>
   <td><input type="button" class="more"  value="+"/></td>
  </tr>
  <tr>
  [...]
  </tr>
 </tbody>
 <tfoot class="hide-if-no-paging">
  <tr>
   <td colspan="6">
     <input type="button" id="btnAdd" value="Add"/>
   </td>
  </tr>
 </tfoot>
</table>

And my JS code :

//Add a row

function Add(){
$("#PA tbody").append(
    "<tr>"+
    "<td><input type='text' class='argument' /></td>"+
    "<td><input type='button' class='less' value='-'/></td>"+
    "<td><input type='text' class='note' disabled='disabled' value='0'/></td>"+
    "<td><input type='button' class='more' value='+'/></td>"+
    "<td><input type='button' class='btnDelete' value='X'/>"+
    "</tr>");
    $(".btnDelete").bind("click", Delete);
};

//Suppr a row

function Delete(){
    var par = $(this).parent().parent(); //tr
    par.remove();
};

//Active function

$(function(){
    //Add, Save, Edit and Delete functions code
    $(".btnDelete").bind("click", Delete);
    $("#btnAdd").bind("click", Add);
});

//Add 1 at the note of the row

$( '.more' ).mousedown(function() {
    x=$(this).closest("tr").find( ".note" );
    val = parseInt(x.val());
    if(val<9){x.val(val+1);}
});

//Delete 1 at the note of the row

$( '.less' ).mousedown(function() {
    x=$(this).closest("tr").find( ".note" );
    val = parseInt(x.val());
    if(val>1){x.val(val-1);}
});

It's visible on Jsfiddle : http://jsfiddle.net/9MyRa/.

In first time you can see that i can add value of ".note" with clic on ".less" or on ".more" but only on element not come form append(). On this last element from append(), this both function does't work :-(

thank's

Answer 1

You need to use event delegation to support dynamically added elements.

$(function () {
    //Add, Save, Edit and Delete functions code
    $(".btnDelete").bind("click", Delete);
    $("#btnAdd").bind("click", Add);
    $('#PA tbody').on("click", '.btnDelete', Delete);
    $('#PA tbody').on('click', '.more', function () {
        x = $(this).closest("tr").find(".note");
        val = parseInt(x.val());
        if (val < 9) {
            x.val(val + 1);
        }
    });

    $('#PA tbody').on('click', '.less', function () {
        x = $(this).closest("tr").find(".note");
        val = parseInt(x.val());
        if (val > 1) {
            x.val(val - 1);
        }
    });


    function Add() {
        $("#PA tbody").append(
            "<tr>" +
            "<td><input type='text' class='argument' /></td>" +
            "<td><input type='button' class='less' value='-'/></td>" +
            "<td><input type='text' class='note' disabled='disabled' value='0'/></td>" +
            "<td><input type='button' class='more' value='+'/></td>" +
            "<td><input type='button' class='btnDelete' value='X'/>" +
            "</tr>");

    };


    function Delete() {
        var par = $(this).closest('tr') //tr
        par.remove();
    };
});

Demo: Fiddle

When you use a normal event registration model, it will register the handlers directly to the targeted which are present in the dom at the point of the handler registration execution. So elements which are added later dynamically will not get those handlers.

The solution to this is to use event delegation, in this model the handler is registered to a ancestor element which will be present when the page is loaded with the a selector to filter out the source element. This makes use of event propagation - events happening in an element is propagated to all the ancestor elements(there are few exceptions like focus event). So an event happening in an element gets propagated to the ancestor element in one of them the handler is registered then the events source element(event.target) and its ancestors is matched against the selector passed as the second parameter, if it is satisfied then the handler is executed.