Question

我试图简单地删除最近的李。

如果我只是这样做，那就有效：<li><a id="delete-hello">Teste</a></li>

控制台中没有错误。 问题是我的li已生成然后用户执行了某些操作（在这种情况下点击按钮时））因此，这种方法永远不会被触发，而且永远不会消失。

生成li之后我的$("a[id^='delete-']").click(function()如何运行？

$(document).ready(function() {

  //delete testCase row when click delete button
  $("a[id^='delete-']").click(function() {
    console.log('clicked');
    $(this).closest('li').remove();
  });

  var table = $('#dataTable').DataTable({
    buttons: [{
      text: 'Add test case(s)',
      action: function() {
        var testCaseName;
        var data = table.rows({
          selected: true
        }).data();
        console.log(data);
        $.each(data, function(index, value) {
          console.log(value[1]);
          testCaseName = value[1];
          $('#testCaseList').append('<li class="list-group-item justify-content-between">' + testCaseName + '<a class="action-icon" id="delete-' + testCaseName + '" name="' + testCaseName + '"><span class="fa fa-trash"></span></button></li>')
        });
      }
    }]
  });

});

<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.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


<ul id="testCaseList" class="list-group"></ul>

Answer 1

委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。

由于您的元素已动态添加到DOM，因此您需要使用事件委派 on() ：

$("body").on('click', "a[id^='delete-']", function() {
    console.log('clicked');
    $(this).closest('li').remove();
});

单击时删除元素

1 个答案: