Question

使用jQuery，我使用$.get()函数获取HTML数据。在回调函数中，当我放置一个断点时，数据变量不为空，我看到我与正确类（deleteLink）的链接，所以我可以选择它。

$.get(path, function(data) {
    $(data).find("a.deleteLink").click(function(event) {
        event.preventDefault();
        DeleteRow(event);
    });
    $("#tbody_id").append(data);
});

收到的数据示例：

<tr>
    <td>Some data</td>
    <td><a href="#" class="deleteLink">X</a></td>
</tr>

我在将事件监听器分配给链接之前和之后尝试了append()数据。我收到数据时没有JS错误，使用$(data).find("a.deleteLink")函数返回了良好的元素，<tbody>返回了正确的$("#tbody_id")元素，当我点击链接时没有错误，为什么永远不会调用DeleteRow()？

Answer 1

我假设当您交换事件顺序时，它看起来像这样：

$("#tbody_id").append(data);
$(data).find("a.deleteLink").click(function(event) {
    event.preventDefault();
    DeleteRow(event);
});

我怀疑这里的问题是data不是DOM的一部分，因此您实际上并没有将任何点击处理程序附加到DOM元素。将上述内容与此对比：

$("#tbody_id").append(data);
$("#tbody_id").find("a.deleteLink").click(function(event) {
    event.preventDefault();
    DeleteRow(event);
});

在这种情况下，第二个语句是查找DOM，而不是查找从服务器返回的字符串。这是一个微妙但重要的区别。

无论哪种方式，您都可以使用event delegation轻松完成此任务。只需将click事件绑定到一个通用的非动态父元素，然后按事件生成元素进行过滤：

$("#tbody_id").on("click", "a.deleteLink", function(event) {
    event.preventDefault();
    DeleteRow(event);
});

这将是在你的AJAX调用之外它只需要绑定一次。然后在你的AJAX调用中，你需要做的就是附加：

$.get(path, function(data) {
    $("#tbody_id").append(data);
});

Answer 2

与David在评论中提到的一样，使用on()定义事件处理程序要容易得多。有了这个，您可以创建委托事件处理程序。来自jQuery的文档reference：

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。通过选择一个保证在当时存在的元素委托事件处理程序附加，您可以使用委托事件避免频繁附加和删除事件处理程序。

因此，选择一个存在的父元素，您只需要将事件绑定一次。

$('#tbody_id').on('click', '.deleteLink', function(event) {
  event.preventDefault();
  DeleteRow(event);
});

$.get(path, function(data) {
  $("#tbody_id").append(data);
});

Answer 3

最初执行$(data)时，jQuery会从原始HTML中创建元素，然后将事件处理程序添加到该元素中。但是当你.append(data)它从HTML中生成新元素时，与你先创建的元素无关，并添加了一个事件处理程序。您可以做的是将其处理为DOM元素一次，将事件处理程序添加到该元素，然后附加：

$.get(path, function(data) {
    var $el = $(data);
    $el.find("a.deleteLink").click(function(event) {
        event.preventDefault();
        DeleteRow(event);
    });
    $("#tbody_id").append($el);
});

Answer 4

在将数据添加到DOM之前，您正在查找数据中的链接，我不确定您是否可以这样做。

首先附加数据，然后附加onlick事件：

$.get(path, function(data) {
    $("#tbody_id").append(data);
    $("a.deleteLink").click(function(event) {
        event.preventDefault();
        DeleteRow(event);
    });        
});

您还可以执行始终查找生成内容的委托点击事件：

$("#tbody_id").on("click", "a.deleteLink", function(){
    event.preventDefault();
    DeleteRow(event);
});

然后，每次获取数据时都不必添加新事件。希望有所帮助

如何在使用$ .get收到的数据中添加点击事件进行链接？

4 个答案: