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

我有以下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;
}

我只是意识到文本中的变化并发出警告。一旦成功完成，我将使用AJAX将数据传输到后端

---

谢谢

您可以更改

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

}

函数generateTableRow（）{
var emptyColumn=document.createElement（'tr'）；
emptyColumn.innerHTML='-'+
'' +
'100.00' +
'' +
''+
'' +
''+
'' +
'' +
'' ;
itembound（emptyColumn）；//仅将侦听器绑定到emptyColumn
返回空列；
}
函数项绑定（elm）
{
$（“.itemcode”，elm）.on（“focus”，function（））{
$（this.data（“initialText”，$（this.html（））；
});
$（“.itemcode”，elm）.on（“blur”，function（）{
if（$（this）.data（“initialText”）！==$（this.html（））{
警报（$（this.html（））
}
});
}

您可以使用。您可以提供

itembound

code您是使用javascript addEventListener还是使用jQuery bind（）/on（）方法？如果你能给出itemcode（）的代码，这将有助于给出更好的答案。正如Rejith所说，我使用了事件委托，它似乎工作得很好！！！我敢说，太好了！谢谢！！：）谢谢你的回答！！

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

}