CODEWITHSUNDEEP
javascriptjqueryhtml
Miguel
Miguel

Reputation: 2079

adding a click function to button dynamically

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  = "";

          });

Upvotes: 0

Views: 197

Answers (3)

JB-
JB-

Reputation: 321

The click event on the .delbtn is not a live event and is not applied to the newly appended elements.

Depending the JQuery version you are using you can use one of the following to add a live event.

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

Upvotes: 3

user1482291
user1482291

Reputation: 1

Try this

$(newButton).bind('click',function(){...})

Upvotes: 0

Tats_innit
Tats_innit

Reputation: 34107

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++
    });

Upvotes: 2

Related Questions