将 jQuery 应用于动态添加的 <tr>

Question

我已经使用 jQuery 开发了一个代码，它已经有 3 行并且有一个文本框，我可以在其中添加更多行，类似于之前的行。最初，jQuery 应用于前 3 行（硬编码）。我想将相同的 jQuery 应用于以后动态添加的行。那么我该怎么做呢？代码在这里：

$('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>

Answer 1

用途：

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

因为你动态加载元素

$('.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>

Answer 2

使用来自 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;
  }
});

Answer 3

您当前的点击功能只会将事件绑定到已经存在的父级。所以你可以使用document来解决....

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

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

Answer 4

   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/)

Answer 5

您需要委托事件处理程序on('click')。您的点击需要

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

和

$('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>