Question

当我尝试添加添加按钮时，我遇到了麻烦，它正常工作，但是之后的下一个按钮无法再进行操作了。

请帮我解决这个问题..

这是我的HTML代码：

$(document).ready(function() {

  $('#add_seq').click(function() {
    $('#tbl_seq').append('<tr><td style="text-align: center;">1</td><td style="text-align: center;"><select class="form-control" id="" name="pic_id" style="width: 100%;"><option></option><option>2</option><option>3</option><option>4</option></select></td><td style="text-align: center;"><a href="#" id="del_seq" style="margin: 10px; color: #000;"><i class="fas fa-trash-alt"></i></a><a href="#" data-id="add_seq" style="margin: 10px; color: #000;"><i class="fas fa-plus-square"></i></a></td></tr>');
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl_seq" class="table table-bordered table-hover table-condensed table-striped">
  <thead>
    <tr>
      <th style="text-align: center;">SEQUENCE</th>
      <th style="text-align: center;">PIC</th>
      <th style="text-align: center;">ACTION</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="text-align: center;">1</td>
      <td style="text-align: center;">
        <select class="form-control" id="" name="pic_id" style="width: 100%;">
          <option></option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
        </select>
      </td>
      <td style="text-align: center;">
        <a href="#" id="del_seq" style="margin: 10px; color: #000;"><i class="fas fa-trash-alt"></i></a>
        <a href="#" id="add_seq" style="margin: 10px; color: #000;"><i class="fas fa-plus-square"></i></a>
      </td>
    </tr>

  </tbody>
</table>

Answer 1

@rezawisnuw，Insted of using ID使用该类，当您按照dnamically添加按钮时

 $('#add_seq').click(function () {

永远不会工作你必须写

 $('body').on('click', '#add_seq', function() {

检查以下解决方案

＆＃13;

                  $(document).ready(function() {
$('body').on('click', '.btnAdd', function() {
 
                        $('#tbl_seq').append('<tr><td style="text-align: center;">1</td><td style="text-align: center;"><select class="form-control" id="" name="pic_id" style="width: 100%;"><option></option><option>2</option><option>3</option><option>4</option></select></td><td style="text-align: center;"><a href="#" id="del_seq" style="margin: 10px; color: #000;"><i class="fa fa-trash btnDelete"></i></a><a href="#" data-id="add_seq" style="margin: 10px; color: #000;"><i class="fa fa-plus-square btnAdd"></i></a></td></tr>');
                      });
$('body').on('click', '.btnDelete', function() {
 $(this).closest("tr").remove();
                       
                      });
               

                });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<table id="tbl_seq" class="table table-bordered table-hover table-condensed table-striped">
                          <thead>
                            <tr>
                              <th style="text-align: center;">SEQUENCE</th>
                              <th style="text-align: center;">PIC</th>
                              <th style="text-align: center;">ACTION</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td style="text-align: center;">1</td>
                              <td style="text-align: center;">
                                <select class="form-control" id="" name="pic_id" style="width: 100%;">
                                    <option></option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                </select>
                              </td>
                              <td style="text-align: center;">
                                <a href="#" id="del_seq" style="margin: 10px; color: #000;"><i class="fa fa-trash btnDelete"></i></a>
                                <a href="#" id="add_seq" style="margin: 10px; color: #000;"><i class="fa fa-plus-square btnAdd"></i></a>
                              </td>
                            </tr>

                          </tbody>
                            </table>

＆＃13;

Answer 2

以下是你错了的几件事。

首先您不应该有多个具有相同id的元素。因此，您应该将id更改为class

在附加行中

其次，您没有添加id="add_seq"的元素，但添加的元素data-id="add_seq"不同（data-* attributes）。< / p>

最后如果您希望jQuery click事件处理动态创建的元素，则应将其绑定到文档而不是元素。因为绑定到元素只会将它绑定到当前在DOM中的那些元素。

以下是一个工作示例

$(document).on('click', '.add_seq', function() {
  $('#tbl_seq').append('<tr><td style="text-align: center;">1</td><td style="text-align: center;"><select class="form-control" id="" name="pic_id" style="width: 100%;"><option></option><option>2</option><option>3</option><option>4</option></select></td><td style="text-align: center;"><a href="#" class="del_seq" style="margin: 10px; color: #000;"><i class="fas fa-trash-alt"></i></a><a href="#" class="add_seq" style="margin: 10px; color: #000;"><i class="fas fa-plus-square"></i></a></td></tr>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" />

<table id="tbl_seq" class="table table-bordered table-hover table-condensed table-striped">
  <thead>
    <tr>
      <th style="text-align: center;">SEQUENCE</th>
      <th style="text-align: center;">PIC</th>
      <th style="text-align: center;">ACTION</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="text-align: center;">1</td>
      <td style="text-align: center;">
        <select class="form-control" id="" name="pic_id" style="width: 100%;">
          <option></option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
        </select>
      </td>
      <td style="text-align: center;"><a href="#" class="del_seq" style="margin: 10px; color: #000;"><i class="fas fa-trash-alt"></i></a><a href="#" class="add_seq" style="margin: 10px; color: #000;"><i class="fas fa-plus-square"></i></a></td>
    </tr>
  </tbody>
</table>

在下一个按钮上添加按钮行不起作用

2 个答案: