Reputation: 609

Onclick event is not working in new added rows

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.

Upvotes: 0

Answers (2)

Bhushan Kawadkar

Reputation: 28513

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

Upvotes: 6

Ahs N

Reputation: 8386

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>

Upvotes: 3

Onclick event is not working in new added rows

Answers (2)

Related Questions