Onclick event is not working in new added rows

Question

This was my code. When I click the add row it will add the row below. but the on click event is working in the first row alone.

It was not working in the rest of the rows.

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://web-86d95219-b398-4432-85a8-fae716ac3a54.runnablecodesnippets.com/css/datepicker.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://web-86d95219-b398-4432-85a8-fae716ac3a54.runnablecodesnippets.com/js/bootstrap-datepicker.js"></script>
</head>
<body>
<div class="container">
    <div class="row clearfix">
  <div class="col-md-12 column">
   <table class="table table-bordered table-hover" id="tab_logic">
    <thead>
     <tr >
      <th class="text-center">
       #
      </th>
      <th class="text-center">
       Name
      </th>
      <th class="text-center">
       Mail
      </th>
      <th class="text-center">
       Mobile
      </th>
     </tr>
    </thead>
    <tbody>
     <tr id='addr0'>
      <td>
      1
      </td>
      <td>
      <input id = "date0" type="text" name='name0'  placeholder='Name' class="form-control"/>
      </td>
      <td>
      <input type="text" name='mail0' placeholder='Mail' class="form-control"/>
      </td>
      <td>
                   <select name="category" class="input category"><option selected>Choose </option><option >Chooser2</option></select>
      </td>
     </tr>
                    <tr id='addr1'></tr>
    </tbody>
   </table>
  </div>
 </div>
 <a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
</div>

<script>
     $(document).ready(function(){
      var i=1;
     $("#add_row").click(function(){
  var datepic = "#date" + i;
  $('#addr'+i).html("<td>"+ (i+1) +"</td><td><input id = 'date"+i+"'  name='name"+i+"' type='text' placeholder='Name' class='form-control input-md'  /> </td><td><input  name='mail"+i+"' type='text' placeholder='Mail'  class='form-control input-md'></td><td><select class='input category'><option selected>d</option></select></td>");
  $(datepic).datepicker();
        $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
        i++; 
   });
     $("#delete_row").click(function(){
      if(i>1){
   $("#addr"+(i-1)).html('');
   i--;
   }
  });
 $(".category").click(function(){
 alert('df');
  });
});
  $(function() {
    var startDate = new Date(2015,2,30);
    $('#date0').datepicker('setDate',startDate);
  });
</script>
</body>
</html>

You can check in the snippet.

Thanks in advance.

possible duplicate of [In jQuery, how to attach events to dynamic html elements?](http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements) — Kindoloki, Jul 28 '15 at 09:25
possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Rohit Arora, Jul 28 '15 at 09:26

Bhushan Kawadkar · Accepted Answer · 2015-07-28T09:35:39.030

For dynamically added row, add click event handle using .on() because by the time you attach a click handler for the add row button dynamica rows were not there and hence you need attach click event handler using document which will delegate the event to matched selector.

$(document).ready(function(){
      var i=1;
     $(document).on("click", "#add_row", function(){
        var datepic = "#date" + i;
        $('#addr'+i).html("<td>"+ (i+1) +"</td><td><input id = 'date"+
          i+"'  name='name" + i + 
          "' type='text' placeholder='Name' class='form-control input-md'/>" 
          + "</td><td><input  name='mail" + 
          i + "' type='text' placeholder='Mail'  class='form-control input-md'>"
          +"</td><td><select class='input category'><option selected>d</option></select>"
          +"</td>");

        $(datepic).datepicker();

         $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
            i++; 
     });

     $(document).on("click","#delete_row", function(){
         if(i>1){
         $("#addr"+(i-1)).html('');
         i--;
         }
     });

    $(document).on("click", ".category", function(){
        alert('df');
     });
});

score 2 · Answer 2 · answered Jul 28 '15 at 09:32

Change this:

$(".category").click(function(){
    alert('df');
     });

to this:

$(document).on('click', '.category', function(){
        alert('df');
});

Its is called delegated events.

Snippet:

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://web-86d95219-b398-4432-85a8-fae716ac3a54.runnablecodesnippets.com/css/datepicker.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://web-86d95219-b398-4432-85a8-fae716ac3a54.runnablecodesnippets.com/js/bootstrap-datepicker.js"></script>
</head>
<body>
<div class="container">
    <div class="row clearfix">
  <div class="col-md-12 column">
   <table class="table table-bordered table-hover" id="tab_logic">
    <thead>
     <tr >
      <th class="text-center">
       #
      </th>
      <th class="text-center">
       Name
      </th>
      <th class="text-center">
       Mail
      </th>
      <th class="text-center">
       Mobile
      </th>
     </tr>
    </thead>
    <tbody>
     <tr id='addr0'>
      <td>
      1
      </td>
      <td>
      <input id = "date0" type="text" name='name0'  placeholder='Name' class="form-control"/>
      </td>
      <td>
      <input type="text" name='mail0' placeholder='Mail' class="form-control"/>
      </td>
      <td>
                   <select name="category" class="input category"><option selected>Choose </option><option >Chooser2</option></select>
      </td>
     </tr>
                    <tr id='addr1'></tr>
    </tbody>
   </table>
  </div>
 </div>
 <a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
</div>

<script>
     $(document).ready(function(){
      var i=1;
     $("#add_row").click(function(){
  var datepic = "#date" + i;
  $('#addr'+i).html("<td>"+ (i+1) +"</td><td><input id = 'date"+i+"'  name='name"+i+"' type='text' placeholder='Name' class='form-control input-md'  /> </td><td><input  name='mail"+i+"' type='text' placeholder='Mail'  class='form-control input-md'></td><td><select class='input category'><option selected>d</option></select></td>");
  $(datepic).datepicker();
        $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
        i++; 
   });
     $("#delete_row").click(function(){
      if(i>1){
   $("#addr"+(i-1)).html('');
   i--;
   }
  });
 $(document).on('click', '.category', function(){
 alert('df');
  });
});
  $(function() {
    var startDate = new Date(2015,2,30);
    $('#date0').datepicker('setDate',startDate);
  });
</script>
</body>
</html>

Onclick event is not working in new added rows

2 Answers2