動態添加可點擊的行到表

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的元素，但將click單擊委托給該元素中單擊的任何tr 。 由於事件每次都被委托，所以#example任何新添加的tr元素也將被包含在內。

Answer 2

試試這個：下面的代碼將處理動態添加的行。

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

Answer 3

您正在對document.ready上的click事件進行綁定。 在病房之后添加的新元素將不會共享此綁定。

Yu可以通過使用.on()來.on()你的.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);
}

在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