Question

所以我在表格中附加一行，然后在点击按钮时我要删除该行。但是，我不能以一种看似自然的方式来做，比如：

$(".usun").on("click", function(){
    $(this).parent().parent().remove();
});

其中.usun是一类删除表中行的按钮。当然，这段代码在$(document).ready(...内。对我来说似乎有用的是：

$(this).on("click", ".usun", function(){ 
    $(this).parent().parent().remove();
});

我不明白为什么。有人可以解释一下吗？

Answer 1

.on()提供了多种方法签名，您可以阅读here。

您的第一个语法（$(".usun").on(）只是一次，将点击处理程序附加到每个单独的.usun元素。如果以后添加更多内容，则他们没有点击处理程序。

第二种语法（$(this).on("click", ".usun", function()...）将单个侦听器附加到document，说＆＃34;任何时候点击我内部的.usun，做点什么＆＃34;。这包括在$(document).ready被触发后添加更多匹配元素的情况。

Answer 2

这是因为您在注册活动时尚未存在特定的.usun。您需要将事件注册到其父元素（最好是表ID），如下所示：

$('#yourtableid').on("click", ".usun", function(){ //if table id does not exist, you can use $('body') instead
    $(this).parent().parent().remove();
});

这将确保您将事件附加到“未出生”元素。

希望这有帮助！

Answer 3

所以你知道这个...你的问题与javascript中的 live 和非实时列表（集合）有关;

查看以下Javascript，

var queryStatic = document.querySelectorAll(".usun"); //non-live | static list
var queryLive = document.getElementsByTagName("div"); //live list

queryStatic将返回一个静态引用满足查询条件的节点的NodeList。

如果您要更改/修改节点的属性/ fields /成员或者此NodeList在使用queryStatic之外引用的元素，它将在queryStatic实例中表示;

但是，你不能在DOM中添加一个新元素/节点，将满足查询并期望它在该NodeList中。

然而，

queryList（HTML Collection）将代表两个方面。这是一个实时列表。

关键是，下划线概念与方法签名几乎没有任何关系。

修改

然而，在jQuery的.on()方法的情况下;支持将侦听器附加到父元素（如Document）并指定其他查询条件。

.on（）对附加元素（jQuery）不起作用

3 个答案:

修改