Question

我有以下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将数据传递给后端。

谢谢

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

}

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

1 个答案: