jquery - jQuery 发布成功数据不在 DOM 中

Question

我的问题如下，jQuery Post 成功方法返回了一些数据，我要添加到 div 的数据，但看起来我要添加的数据不在 DOM 中。

jQuery 邮政编码：

$('#form').submit(function() {

  var text = $("#input").val();

  $.ajax({
     type: "POST",
     url: "file.php",
     data: "name=" + text,
     success: function(data) {
      $("#app").prepend("<span class='delete'>" + data + "</span>");
     }
  });

    return false;
});

这是删除跨度但不删除前置元素的代码。

$('.delete').on('click' , function() {

    $(this).hide();

});

Answer 1

问题是绑定处理程序span时元素不存在click，因此没有触发事件处理程序。您需要使用事件委托来捕获尚不存在的元素上的事件：

$('#app').on('click', '.delete', function() {
    $(this).hide();
});

处理程序现在绑定到#app，它将始终存在。#app源自子元素的事件“冒泡”并在其父元素上触发，因此如果原始元素匹配，则绑定到后代元素的所有点击事件都会触发此处理程序.delete。