1

我正在尝试使用可点击的 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 );

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

有谁知道为什么？

4

4 回答 4

2

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

有谁知道为什么？

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

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

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

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

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

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

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

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

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

这将做的是将事件绑定到 id of 的元素，example但将点击委托给tr该元素内的任何点击。由于每次都委托事件，因此也将包括其中任何新添加tr的元素。#example

于 2013-04-23T20:26:46.450 回答
1

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

//clicked function
$('#example').on('click', 'tr', function(){
    alert('You clicked row '+ ($(this).index()) );
});
于 2013-04-23T20:17:56.147 回答
0

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

Yu 可以通过使用来实现你所追求的 .on() 

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

演示

于 2013-04-23T20:18:23.273 回答
0

这是你想要达到的目标吗？

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

在jsfiddle上

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

然后继续使用Node.cloneNode添加行

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

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

处理此问题的另一种方法是使用jquery 委托事件处理程序方法 (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);
}

在jsfiddle上

于 2013-04-23T20:33:51.893 回答