javascript - 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=".3.5/css/bootstrap.min.css">
<link rel="stylesheet" href=".css">
<script src=".11.0.min.js"></script>


<script src=".3.5/js/bootstrap.min.js"></script>
<script src=".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>

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./bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://web-86d95219-b398-4432-85a8-fae716ac3a54.runnablecodesnippets./css/datepicker.css">
<script src="http://code.jquery./jquery-1.11.0.min.js"></script>


<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://web-86d95219-b398-4432-85a8-fae716ac3a54.runnablecodesnippets./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.

Share Improve this question asked Jul 28, 2015 at 9:21 Anandhakumar R 6092 gold badges6 silver badges15 bronze badges

possible duplicate of In jQuery, how to attach events to dynamic html elements? – Kindoloki Commented Jul 28, 2015 at 9:25
possible duplicate of Event binding on dynamically created elements? – Rohit Arora Commented Jul 28, 2015 at 9:26

Add a ment |

2 Answers 2

Sorted by: Reset to default 6

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

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./bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://web-86d95219-b398-4432-85a8-fae716ac3a54.runnablecodesnippets./css/datepicker.css">
<script src="http://code.jquery./jquery-1.11.0.min.js"></script>


<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://web-86d95219-b398-4432-85a8-fae716ac3a54.runnablecodesnippets./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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Onclick event is not working in new added rows - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)