Question

I have a delete button on a table and a jquery on click eventlistener for the button.
here is the code

$(".delbtn").click(function () { 
    var count = 0;
    var $row = jQuery(this).closest('tr'); 
    var $columns = $row.find('td'); 

    var values = ""; 

    jQuery.each($columns, function(i, item) { 
        if( count == 0 ){delFund = item.innerHTML}
        if( count == 1) {delOrg  = item.innerHTML}
        if( count == 2) {stat = item.innerHTML }    
        count++
    }); 

//the below lines of codes would display how to show values on a browser like 
// firefox or chrome.
//console.log(delFund, delOrg);


    $(this).closest("tr").fadeTo(500, 0, function () {  
        $(this).remove(); 
    }); 


//update the item on the database table for deletion.
  $.ajax({type: "POST",
          url: "dbfunctions.jsp",  
          data: {TYPE:'D', fundval: delFund, orgval: delOrg, tuidval:tuid, status:stat }}).done(function( msg )
          {  
            //alert(msg);
          });

});

This all works fine,my problem is that i query a database which i then used to update the html table with this data and I add an new button to the last row on the table. However the button does not respond when i click it. I believe is because there has not been an event listener attached to it. So my my question is how can I update the button so that the event listener that i have already added to all the previous buttons also gets attached to the new dynamically generated button?

here is the code snippet of how i add the item to the end of my table.

$("#thisTable > tbody").append( 
                                        "<tr><td>"+thisfund.value+"</td>"+
                                        "<td>"+thisorg.value+"</td>"+
                                        "<td>"+'PENDING ACCESS'+"</td>" +
                                        "<td>"+"<a class='delbtn' href='#'>X</a>"+"</td></tr>");
        thisfund.value = "";// set the input boxes back to null
            thisorg.value  = "";

          });

Answer 1

Try this man:

API: http://api.jquery.com/on/

The .on() method attaches event handlers to the currently selected set of elements in the jQuery object.

Any event names can be used for the events argument. jQuery will pass through the browser’s standard JavaScript event types, calling the handler function when the browser generates events due to user actions such as click.

In your case even though the new tr with class='delbtn' the .on event will take it over.

Hope this helps,

code

$(document).on('click','.delbtn',function () { 
    var count = 0;
    var $row = jQuery(this).closest('tr'); 
    var $columns = $row.find('td'); 

    var values = ""; 

    jQuery.each($columns, function(i, item) { 
        if( count == 0 ){delFund = item.innerHTML}
        if( count == 1) {delOrg  = item.innerHTML}
        if( count == 2) {stat = item.innerHTML }    
        count++
    });