仅将事件侦听器添加到动态创建的元素而不是其他子元素答案

【问题标题】：Add event listener to dynamically created elements only and not on other children仅将事件侦听器添加到动态创建的元素而不是其他子元素
【发布时间】：2016-07-22 03:29:46
【问题描述】：

我有以下 jquery 代码：

function generateTableRow() {
    var emptyColumn = document.createElement('tr');
    emptyColumn.innerHTML = '<td><a class="cut">-</a><span class="itemcode" contenteditable></span></td>' +
        '<td colspan="2"><span contenteditable></span></td>' +
        '<td><span contenteditable>100.00</span></td>' +
        '<td><span contenteditable></span></td>' +
        '<td><span contenteditable></span></td>'+
        '<td><span contenteditable></span></td>' +
        '<td><span contenteditable></span></td>'+
        '<td><span contenteditable></span></td>' +
        '<td><span contenteditable></span></td>' +
        '<td><span contenteditable></span></td>' ;
    itembound();
    return emptyColumn;
}

现在，函数 itembound() 旨在将 onfocus 和 onblur 事件侦听器附加到动态生成的新空列。

但是，它的作用是在每次调用时将一个事件侦听器附加到所有子元素。

因此，我所拥有的是：如果我有五行（例如），第一行有 5 个处理程序，第二行有 4 个，依此类推。

我的问题是如何将此事件处理程序仅添加到新的子元素，而忽略旧的。

编辑 1

真的很抱歉耽搁了。谢谢大家的回答和帮助。

根据要求，itembound() 代码如下：

function itembound()
{

$("#inventory_table .itemcode").on("focus", function(){
$(this).data("initialText", $(this).html());
});

$("#inventory_table .itemcode").on("blur", function(){
    if ($(this).data("initialText") !== $(this).html()) {
        alert($(this).html())
    }
});

}

我只是在识别文本中的变化并发出警报。成功完成后，我将使用 AJAX 将数据传送到后端。

谢谢

【问题讨论】：

你可以使用event delegation。
能否提供itembound代码
您是在使用 javascript addEventListener？还是使用 jQuery bind()/on() 方法？如果你能给出itemcode()的代码，将有助于给出更好的答案。
我使用了 Rejith 所说的事件委托，它似乎工作正常！！！我敢说，太好了！谢谢！！ :)

标签： javascript jquery django-templates

【解决方案1】：

您可以更改itembound 函数以指定在哪个元素上绑定侦听器

itembound(emptyColumn) 会有所帮助

function generateTableRow() {

    var emptyColumn = document.createElement('tr');
    emptyColumn.innerHTML = '<td><a class="cut">-</a><span class="itemcode" contenteditable></span></td>' +
        '<td colspan="2"><span contenteditable></span></td>' +
        '<td><span contenteditable>100.00</span></td>' +
        '<td><span contenteditable></span></td>' +
        '<td><span contenteditable></span></td>'+
        '<td><span contenteditable></span></td>' +
        '<td><span contenteditable></span></td>'+
        '<td><span contenteditable></span></td>' +
        '<td><span contenteditable></span></td>' +
        '<td><span contenteditable></span></td>' ;
    itembound(emptyColumn); // bound listeners to emptyColumn only
    return emptyColumn;
}
function itembound(elm)
{
 $(".itemcode",elm).on("focus", function(){
    $(this).data("initialText", $(this).html());
    });

    $(".itemcode",elm).on("blur", function(){
        if ($(this).data("initialText") !== $(this).html()) {
            alert($(this).html())
        }
    });

}

【讨论】：

感谢 Jags 的回答！！