Question

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

这是我的代码：

HTML：

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

JavaScript的：

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

//add new row
var x=document.getElementById('example');
var new_row = x.rows[0].cloneNode(true);                      
new_row.cells[0].innerHTML = "hello";
x.appendChild( new_row );

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

任何人都知道为什么？

Answer 1

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

任何人都知道为什么？

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

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

但是，使用jQuery 1.7 +的on()或jQuery 1.6-delegate()方法，您可以将事件与委托绑定。

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

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

使用jQuery 1.7+时使用on()看起来类似于：

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

使用jQuery 1.6时使用delegate()看起来与此类似：

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

这样做会将事件绑定到ID为example的元素，但将点击委托给该元素中点击的任何tr。每次委派活动时，tr中新添加的#example元素也会被包含在内。

Answer 2

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

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

Answer 3

您正在对document.ready上的click事件进行绑定。在病房之后添加的新元素将不会共享此绑定。

Yu可以使用.on()

来实现您的目标

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

DEMO

Answer 4

这是你想要实现的目标吗？

<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);
}

on jsfiddle

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

然后使用Node.cloneNode

继续添加行

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

所以没有事件处理程序绑定到任何这些新添加的元素。

另一种解决方法是使用jquery delegate event handler method (on)

提供选择器时，事件处理程序称为授权。直接在事件发生时不会调用处理程序绑定元素，但仅适用于后代（内部元素）匹配选择器。 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);
}

on jsfiddle

动态添加可点击的行到表

4 个答案: