Javascript 将可单击的行动态添加到表中

我正在尝试使用可单击的JavaScript向HTML表格中添加行

这是我的密码：

HTML:

问题是，新添加的行是可单击的，但不会通过单击功能获取警报

有人知道为什么吗

试试这个： 下面的代码将处理动态添加的行

//clicked function
$('#example').on('click', 'tr', function(){
    alert('You clicked row '+ ($(this).index()) );
});

---

您正在文档上绑定单击事件。准备就绪。在wards之后添加的新元素将不共享此绑定

您可以使用

.on（）

问题是，新添加的行是可单击的，但不会消失 通过单击功能获取警报

有人知道为什么吗

当您对

tr

元素执行click事件的初始绑定时，事件仅绑定到当时存在于DOM中的

tr

元素

这就是默认情况下事件绑定的工作方式。您只能绑定DOM中当前的内容

然而，使用jQuery1.7+或jQuery1.6-的方法，您可以将事件与委托绑定在一起

这允许您将事件绑定到实际要将事件委托给的元素的最近静态父元素

我假设表本身是最接近的静态父元素，这意味着它始终存在，并且动态添加的只是

tr

元素

当使用jQuery 1.7+时，在（）上使用

on

看起来与此类似：

$('#example').on('click', 'tr', function(){
    alert('You clicked row '+ ($(this).index()) );
});

$('#example').delegate('tr', 'click' , function(){
    alert('You clicked row '+ ($(this).index()) );
});

在使用jQuery 1.6时使用

delegate（）

-看起来与此类似：

$('#example').on('click', 'tr', function(){
    alert('You clicked row '+ ($(this).index()) );
});

$('#example').delegate('tr', 'click' , function(){
    alert('You clicked row '+ ($(this).index()) );
});

---

这样做的目的是将事件绑定到id为

example

的元素，但将单击委托给该元素中单击的任何

tr

。由于每次都委派事件，因此也将包括

#示例
中新添加的
tr
元素。
这就是您试图实现的目标吗

<table border="1" id="example" style="cursor: pointer;">
    <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
        </tr>
    </thead>
    <tbody id="addHere"></tbody>
</table>

var addHere = document.getElementById("addHere");
var newTr;
var newTd;

function clicked(evt) {
    alert("clicked tr: " + evt.target.parentNode.id);
}

for (var i = 1; i < 11; i += 1) {
    newTr = document.createElement("tr");
    newTr.id = "row" + i;
    newTr.addEventListener("click", clicked, false);

    for (j = 1; j < 5; j += 1) {
        newTd = document.createElement("td");
        newTd.textContent = j;
        newTr.appendChild(newTd);
    }

    addHere.appendChild(newTr);
}


1.
2.
3.
4.
var addHere=document.getElementById（“addHere”）；
var newTr；
var newTd；
单击的函数（evt）{
警报（“单击tr:+evt.target.parentNode.id”）；
}
对于（变量i=1；i<11；i+=1）{
newTr=document.createElement（“tr”）；
newTr.id=“行”+i；
newTr.addEventListener（“单击”，单击，错误）；
对于（j=1；j<5；j+=1）{
newTd=document.createElement（“td”）；
newTd.textContent=j；
newTr.appendChild（newTd）；
}
addHere.appendChild（newTr）；
}

在

在代码中，您似乎正在查找行，然后将事件绑定到找到的任何行

然后继续使用添加行

克隆节点会复制其所有属性及其值，
包括内在（在线）侦听器。它不复制事件
使用addEventListener（）添加的侦听器或分配给元素的侦听器
属性（例如node.onclick=fn）

因此，没有任何事件处理程序绑定到这些新添加的元素

另一种处理方法是使用

当提供选择器时，事件处理程序称为
委派。当事件直接发生在上时，不调用处理程序
绑定元素，但仅适用于
匹配选择器。jQuery将事件从事件目标向上冒泡
到处理程序所附加的元素（即，最内层到
最外层的元素），并为沿着该元素的任何元素运行处理程序
与选择器匹配的路径

然后执行以下操作

var addHere = document.getElementById("addHere");
var newTr;
var newTd;

function clicked(evt) {
    alert("clicked tr: " + evt.target.parentNode.id);
}

$(document).on("click", "#addHere tr", clicked);

for (var i = 1; i < 11; i += 1) {
    newTr = document.createElement("tr");
    newTr.id = "row" + i;

    for (j = 1; j < 5; j += 1) {
        newTd = document.createElement("td");
        newTd.textContent = j;
        newTr.appendChild(newTd);
    }

    addHere.appendChild(newTr);
}

var addHere=document.getElementById（“addHere”）；
var newTr；
var newTd；
单击的函数（evt）{
警报（“单击tr:+evt.target.parentNode.id”）；
}
$（文档）。在（“单击”，“添加到此处”，单击）；
对于（变量i=1；i<11；i+=1）{
newTr=document.createElement（“tr”）；
newTr.id=“行”+i；
对于（j=1；j<5；j+=1）{
newTd=document.createElement（“td”）；
newTd.textContent=j；
newTr.appendChild（newTd）；
}
addHere.appendChild（newTr）；
}

在
上，看看这个问题：您应该解释为什么，正如OP所问的“有人知道为什么吗？”您应该在最接近的父级上添加处理程序，以避免主体上的事件委派瓶颈。
var addHere = document.getElementById("addHere");
var newTr;
var newTd;

function clicked(evt) {
    alert("clicked tr: " + evt.target.parentNode.id);
}

$(document).on("click", "#addHere tr", clicked);

for (var i = 1; i < 11; i += 1) {
    newTr = document.createElement("tr");
    newTr.id = "row" + i;

    for (j = 1; j < 5; j += 1) {
        newTd = document.createElement("td");
        newTd.textContent = j;
        newTr.appendChild(newTd);
    }

    addHere.appendChild(newTr);
}