Bind the Events to the Dynamically Created Rows in a HTML Table

I found a solution to bind the events to the dynamically created buttons in a HTML.Some times we need to add a row to the existing HTML table with some inputs.That dynamically created row is not visible in the page source.Try It !

So to attach the events also we need to do like this

var newRow = "<tr> <td></td> <td><input type='text' 
id='tbNameDyn'/></td> <td> <input type='text' id='tbAgeDyn'/><
/td> <td><input type='checkbox' 
<td><input type='submit' name='submitButton' value='Save Row' id='btnSaveRowDyn' 
onclick='DynButtonClick();'> </td></tr>";
            //  $('#webgrid > tbody:last').
            $('#webgrid tbody:last').append(newRow);
Here I have binded the button with the event "onClick" function "DynButtonClick".See the Code too

function DynButtonClick() {
        var rows = $('#webgrid tr').length;
        var name = $('#tbNameDyn').val();
        var age = $('#tbAgeDyn').val();
        var checked = $('#tbResultDyn').val() == "on" ? true : false;
        $('#hdnFldRowDyn').val(name + ":" + age + ":" + checked);

Now when we click on the dynamically created button the event associated to the button click will fire. Try this let me know if you have Queries :-)


Popular posts from this blog

How to hide bootStrap popover when user click(s) outside the popover?

Exporting to excel from a custom class object using C#.NET

Get the Clicked Cell Value and Column Name of GridView in ASP.NET