Dynamic added controls in JQuery -

i create 2 textboxes dynamically , append table row. need validate textboxes if empty or having values.if empty means need highlight textboxes. if press validatecontrols button ,that particular row textboxes need highlighted if empty. if press validateallcontrols means need highlight textboxes in table if empty.

how this? please refer fiddle link

     <script>          $(document).ready(function () {              $("#inputid").click(function () {                   var table = $('table#mytable');                  var row = "<tr><td> <input name='name' id='name' type='text' />* </td>" +                                     "<td> <input name='email' id='email' type='text' /> </td>" +                                     "<td> <input id='btnadd' type='button' value='validatecontrols' /> "+                                  "</tr>";                  var col = $('<td style="width:100px;" align="left"></td>');                  table.append(row);              });          });     </script>  body  <form id="form1" runat="server">         <input type="button" id="inputid" value="add controls"/>         <input type="button" id="validateall" value="validate controls"/>         <table id="mytable"></table>     </form> 

live demo fiddle

try this

$('#mytable').on('click', '#btnadd', function () {       $(this).parents('tr').find('input:text').each(function () {           if ($(this).val() == '') $(this).css('border', '1px solid red')           else $(this).css('border', '1px solid grey')       });   });   $('#form1').on('click', '#validateall', function () {       $('#mytable').find('input:text').each(function () {           if ($(this).val() == '') $(this).css('border', '1px solid red')           else $(this).css('border', '1px solid grey')       });   }); 

demo