Question

我不知道为什么点击事件无法正常工作，尽管它在fiddle中有效。我有一个模态，其中包含有孩子的类别。我得到json数组并将其转换为php数组。我写了函数。其中一个实现选择/取消选择儿童。例如如果您选择/取消选择父类别，则会选择/取消选择其子项，并在下表中显示。但问题是，当用户点击class="fa fa-times"时，它不会删除表格的特定tr。我再次强调，除了最后一个剧本外，一切顺利。它有什么问题？

  <div class="modal fade" id="permissionDlg" role="dialog">
<div class="modal-dialog">

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Please click to expand it.</h4>
    </div>
    <div class="modal-body">
    <div class="row">
    <form method="post" action="index.php"  class="form-horizontal">

        <div class="form-group" style="margin-left: 10px;">
          <input type="submit" class="btn btn-primary" value="Assign Permission" />
        </div>            
    <div >
        <div class=" tree">
<ul>
<input type="checkbox" name="category[]" value="set here from the php array">
<input type="checkbox" name="category[]" value="set here from the php array">
</form>
<div class="table-responsive">
<table class="table table-hover table-striped">
    <thead>
        <tr>
            <td>Main Category</td>
            <td>1 level </td>
            <td>2 level </td>
            <td>3 level </td>
            <td>Delete </td>
        </tr>
    </thead>
    <tbody id="tbl_permission">

    </tbody>
</table>
</div>
  </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>
  </div>
</div>
<script>

       $(document).ready(function(){
            $('.fa.fa-times').click(function(){
                $(this).closest('tr').remove(); 
            });
       }); 




</script>

Answer 1

我再次强调，除了最后一个剧本外，一切顺利。怎么了？

这是因为元素稍后会进入DOM（动态元素），并且在尝试将事件绑定到fa fa-times的文档就绪事件中不存在。这就是为什么事件甚至没有应用于那些元素，因此它不起作用。

解决方案：使用事件委派

        $('table').on('click','.fa.fa-times',function(){
            $(this).closest('tr').remove(); 
        });

处理click事件以删除表中的特定tr

1 个答案: