Applying jQuery to the dynamically added

Question

I have developed a code using jQuery that already has 3 rows and has a text box, where I can add more rows similarly to previous rows. Initially the jQuery is applied to first 3 rows (which are hard coded). I want to apply the same jQuery to the later dynamically added rows. So how can I do so? Code is here:

$('input[type="checkbox"]').click(function() {
  $(this).next('label').toggleClass('checked', '');
});

$('.glyphicon.glyphicon-trash').click(function() {
  $(this).closest("tr").remove();
});

var i = 4;

$("input[type='text']").keypress(function(event) {
  if (event.which === 13) {
    var Text = $(this).val();
    $(this).val("");
    var j = "checkbox" + i;

    $("tbody").append("<tr><td><div class='checkbox'><input type='checkbox' id='" + j + "'/><label> " + Text + "</label><label class='glyphicon glyphicon-trash' id='" + i + "'></label></div></td></tr>");
    i = i + 1;
  }
});

.checked {
  text-decoration: line-through;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <table class="table">
    <thead>
      <tr>
        <th>To Do List</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="checkbox">
            <input type="checkbox" id="checkbox1" /><label>Task 1</label><label class="glyphicon glyphicon-trash"></label>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="checkbox">
            <input type="checkbox" id="checkbox2" /><label>Task 2</label><label class="glyphicon glyphicon-trash"></label>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="checkbox">
            <input type="checkbox" id="checkbox3" /><label>Task 3</label><label class="glyphicon glyphicon-trash" id="3"></label>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  <div class="row">
    <input type="text" placeholder="Add New Todo">
  </div>
</div>

https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — jacobedawson, Jul 23 '18 at 09:44
Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — peeebeee, Jul 23 '18 at 09:44

score 0 · Answer 1 · answered Jul 23 '18 at 09:45

use global call from jquery.

$('table.table').on('keypress', "input[type='text']", function(event){
  if(event.which === 13){
    var Text = $(this).val();
    $(this).val("");
    var j="checkbox"+i;

    $("tbody").append("<tr><td><div class='checkbox'><input type='checkbox' id='"+j+"'/><label> " + Text + "</label><label class='glyphicon glyphicon-trash' id='"+i+"'></label></div></td></tr>");    
    i=i+1;
  }
});

score 0 · Answer 2 · edited Jul 23 '18 at 15:29

You need delegate event handler on('click'). Your click need to be

$('tbody').on('click', 'input[type="checkbox"]', function() {
    $(this).next('label').toggleClass('checked', '');
});

and

$('tbody').on('click', '.glyphicon.glyphicon-trash', function(){
  $(this).closest("tr").remove();
});

$('tbody').on('click', 'input[type="checkbox"]', function() {
  $(this).next('label').toggleClass('checked', '');
});

$('tbody').on('click', '.glyphicon.glyphicon-trash', function() {
  $(this).closest("tr").remove();
});

var i = 4;

$("input[type='text']").keypress(function(event) {
  if (event.which === 13) {
    var Text = $(this).val();
    $(this).val("");
    var j = "checkbox" + i;

    $("tbody").append("<tr><td><div class='checkbox'><input type='checkbox' id='" + j + "'/><label> " + Text + "</label><label class='glyphicon glyphicon-trash' id='" + i + "'></label></div></td></tr>");
    i = i + 1;
  }
});

.checked {
  text-decoration: line-through;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <table class="table">
    <thead>
      <tr>
        <th>To Do List</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="checkbox">
            <input type="checkbox" id="checkbox1" /><label>Task 1</label><label class="glyphicon glyphicon-trash"></label>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="checkbox">
            <input type="checkbox" id="checkbox2" /><label>Task 2</label><label class="glyphicon glyphicon-trash"></label>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="checkbox">
            <input type="checkbox" id="checkbox3" /><label>Task 3</label><label class="glyphicon glyphicon-trash" id="3"></label>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  <div class="row">
    <input type="text" placeholder="Add New Todo">
  </div>
</div>

score 0 · Accepted Answer · edited Jul 23 '18 at 15:56

Use:

$('.container').on('click', '.elementClass', function() { 
  // code
});

because you dynamically loading elements

$('.container').on('click', 'input[type="checkbox"]', function() {
  $(this).next('label').toggleClass('checked', '');
});

$('.container').on('click', '.glyphicon.glyphicon-trash', function() {
  $(this).closest("tr").remove();
});

var i = 4;

$('.container').on('keypress', "input[type='text']", function(event) {
  if (event.which === 13) {
    var Text = $(this).val();
    $(this).val("");
    var j = "checkbox" + i;

    $("tbody").append("<tr><td><div class='checkbox'><input type='checkbox' id='" + j + "'/><label> " + Text + "</label><label class='glyphicon glyphicon-trash' id='" + i + "'></label></div></td></tr>");
    i = i + 1;
  }
});

.checked {
  text-decoration: line-through;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <table class="table">
    <thead>
      <tr>
        <th>To Do List</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="checkbox">
            <input type="checkbox" id="checkbox1" /><label>Task 1</label><label class="glyphicon glyphicon-trash"></label>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="checkbox">
            <input type="checkbox" id="checkbox2" /><label>Task 2</label><label class="glyphicon glyphicon-trash"></label>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="checkbox">
            <input type="checkbox" id="checkbox3" /><label>Task 3</label><label class="glyphicon glyphicon-trash" id="3"></label>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  <div class="row">
    <input type="text" placeholder="Add New Todo">
  </div>
</div>

score 0 · Answer 4 · answered Jul 23 '18 at 09:56

Your current click function will only bind the event to a parent which already exists . So you can solved by using document ....

$(document).on('click','input[type="checkbox"]',function(){
      $(this).next('label').toggleClass('checked', '');
  });

$(document).on('click','.glyphicon.glyphicon-trash',function(){
      $(this).closest("tr").remove();
});

Bhaskar Reddy · Answer 5 · 2018-07-23T10:03:46.080

   This perfectly adds a new text box when click on "+"(plus) button



        <html>
        <head>
        <title>Dynamic Form</title>
        <script language="javascript">
        function changeIt()
        {
        var i = 1;
        my_div.innerHTML = my_div.innerHTML +"<br><input type='text' name='mytext'+ i>"

        }
        </script>
        </head>
        <body>

        <form name="form" action="post" method="">
        <input type="text" name=t1>
        <input type="button" value="+" onClick="changeIt()">
        <div id="my_div"></div>

        </body>



for JSFiddle click here [a link](https://jsfiddle.net/0k7uy2sp/)

Applying jQuery to the dynamically added

5 Answers5