javascript - 当 tbody 不存在时追加到表以及如何使所有现有 jquery 适用于该行

Question

我有以下 jquery，可以根据用户交互和从服务器接收的数据动态附加到表中。现在表中的每一列都有一些特定的类和一些样式属性，例如列 itemId 被隐藏等等。如果我已经有一行，我的动态添加工作正常，但如果没有，它只会添加另一个标题行，我可以理解这是因为我的代码复制了最后一个 tr 元素。问题是当“tbody”没有行时，如何向“tbody”添加行。

    function responseTopicAdded(data) {
        $('#dialog-modal').dialog('close');
        rowcopy = $('#datatable tr:last').clone();
        rowcopy.children().each(function() {
            switch($(this).attr('class')) {
                case 'Name':
                    $(this).html(data.Name);
                    break;
                case 'Description':
                    $(this).html(data.Description);
                    break;
                case 'Icon':
                    $(this).html('<img src='+ data.Icon +'/>');
                    break;
                case 'itemId':
                    $(this).html(data.itemId);
            }
        });
        $('#datatable tr:last').after($(rowcopy));
    }

我的第二个问题是我的表格单元格响应双击。但新添加的行永远不会响应(即使存在先前的行并且该行已正常添加)。

为什么监听器无法处理新行？

我的听众是这样的:

$(document).ready(function() {
    try {
        $("td").dblclick(function() {
            // ... my code goes here
    }catch(a){
        alert(a);
    }
}

Answer 1

双击事件对新添加的行不起作用的原因是您在元素存在之前绑定(bind)了单击事件。尝试使用这种风格进行绑定(bind)(事件委托(delegate)是术语):

$("#datatable").on("dblclick", "td", function() { //do stuff });

按照在不存在时添加 tbody 的方式，只需检查一下是否存在:

if ($("#datatable tbody").length) { //it exists! } else { //it doesnt exist! }