Question

我使用以下函数在表中添加一行：

function loadTable()
{
    var index, html, tbody;
    //clear the table

    for (index = 0; index < content.length; index++)
    {
        var tbody = document.getElementById("tablei").getElementsByTagName('tbody')[0];
        var row = document.createElement("TR");
        row.setAttribute("id", index);
        row.setAttribute("class", "selectableRow editableDiv");
        var td1 = document.createElement("TD");
        td1.innerHTML = content[index].Author;
        var td2 = document.createElement("TD");
        td2.innerHTML = content[index].AuthorType;
        var td3 = document.createElement("TD");
        td3.innerHTML = content[index].CosignStatus;
        var td4 = document.createElement("TD");
        td4.innerHTML = content[index].FileTime;
        var td5 = document.createElement("TD");
        td5.innerHTML = content[index].NoteTime;

        row.appendChild(td1);
        row.appendChild(td2);
        row.appendChild(td3);
        row.appendChild(td4);
        row.appendChild(td5);
        tbody.appendChild(row);
    }
}

我添加了一个jquery函数来捕获行上的click事件。

$('.selectableRow').click(function (event)
{

    var id = $(this).attr('id');
    var item = content[parseInt(id)];
    alert(id);
}

但点击该行时不会显示警告。

但是我在html中直接添加相同的代码，会调用警报。

Answer 1

那是因为您正在为尚不存在的事物添加处理程序。尝试将点击处理程序包装在change()函数中：

$(document).change(function(){
    $('.selectableRow').click(function (event){
        var id = $(this).attr('id');
        var item = content[parseInt(id)];
        alert(id);
    })
});

更好的是，你可以这样做：

$(document).on('click', '.selectableRow', function() {
    var id = $(this).attr('id');
    var item = content[parseInt(id)];
    alert(id);
});

来自JQuery on()

委派事件的优势在于，它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序的需要。例如，此元素可以是模型 - 视图 - 控制器设计中视图的容器元素，如果事件处理程序想要监视文档中的所有冒泡事件，则可以是文档。在加载任何其他HTML之前，文档元素在文档的头部可用，因此可以安全地将事件附加到那里而无需等待文档准备就绪。

Answer 2

您的方法不起作用，因为您只是向现有datas1.push({ value: value });添加侦听器。您需要在追加新的tr

之后添加侦听器

你可以将click事件包装在函数上，只需在追加元素后调用。

请记住在添加新事件时取消绑定事件

tr

这是一个小例子

https://jsfiddle.net/mhr9coLs/1/

Jquery：处理单击动态添加的行

2 个答案: