$(document）.on('focus'或$(document）.bind('input&#

$(document).on('focus' or $(document).bind('input', not trigger on dynamically added row?

本文关键字：document input bind focus on      更新时间：2023-09-26

我使用了$(document).on('focus' or $(document).bind('input','input:text'，所以我的方法通过（按键）自动将重复的输入值从表1更改为表2，但我的代码不会触发，如果用户将动态更改添加到表中的输入（从新行）。

例如，单击添加行按钮，编辑新的"Apple"字段，并查看这不会更改表2上重复的"苹果"。

请参阅此FIDDLE演示。

$("input:text").each(function () {
    var elem = $(this),
        oldValue;
       $('input:text').trigger('focus');
    $(document).on('focus', 'input:text', function () {
        elem.data('oldVal', elem.val());
        elem.data('oldLen', elem.data('oldVal').length);
    });
    $(document).bind('input', 'input:text', function (event) {
        oldValue = elem.data('oldVal');
        elem.data('oldVal', elem.val());
        if (elem.val().length - elem.data('oldLen') > 1) {
            alert('Most certainly pasted');
        }
        elem.data('oldLen', elem.data('oldVal').length);
       foo(oldValue,elem.val());
    });
});
$("input").blur();

.bind()不接受选择器参数，只有.on()接受。如果要绑定到动态添加的元素，则需要使用.on()。

$(document).on('input', 'input:text', function ...);

修正小提琴

另一个问题是您使用的是$("input:text").each()。这将只处理加载页面时存在的元素。您不需要那个循环，只需正常绑定事件处理程序即可。在处理程序之外不需要变量elem和oldValue；在处理程序中，$(this)是触发事件的元素，您可以从.data()中获取oldValue。

$(document).on('focus', 'input:text', function () {
    var elem = $(this);
    elem.data('oldVal', elem.val());
    elem.data('oldLen', elem.data('oldVal').length);
});
$(document).on('input', 'input:text', function (event) {
    var elem = $(this);
    var oldValue = elem.data('oldVal') || '';
    elem.data('oldVal', elem.val());
    if (elem.val().length - oldValue.length > 1) {
        alert('Most certainly pasted');
    }
    elem.data('oldLen', elem.data('oldVal').length);
    foo(oldValue, elem.val());
});

我已经重构了您的代码**注意：**动态添加元素时不应具有静态id。id应该是唯一的，而且实际上，您的输入都将具有相同的id input_0
相反，由于每行只有一个输入，因此获取行的索引以动态创建id（input0、input1、…、inputN）。请参阅下面的代码，它已被评论。

另一件事是，您的table2没有更新，因为您正在动态添加行，并且$（selector）.each（）只运行一次。如果你把它放在一个函数中，每次添加一行时都会调用它，那么一切都会很好。

//----------adding a row
$(document).on("click", '.tdAdd', function () {
    var table = $(this).parents("#table1");
    // get the row
    var currentRow = $(this).closest("tr");
    // get the current value of the input
    // in order to duplicate it
    var currentVal = currentRow.children().find("input[type='text']").val();
    // one way to create a cell
    var buttonCell = '<td><input type="button" value="Add Row" class="tdAdd"/></td>';
    // but I'd rather do it like this
    // because I can assign any value as an attribute - dynamic
    var inputCell = $("<td>").append($('<input type="text"/>').attr({
           id : "input" + (currentRow.index() + 1),
           value : currentVal,
           class : "ttt"
        }));
    table.append(
        $("<tr>").append(buttonCell, inputCell)
    );
    // invoking this function in order to update $(selector).each()
    updateEachFn();
});

以及包装器功能

// wrap $(selector).each() inside a function to be invoked 
// every time a row is added to keep everything up to date
function updateEachFn() {
  $("input:text").each(function () {
    var elem = $(this),
        oldValue;
    $('input:text').trigger('focus');
    // do not use document, because it will unnecessarily go through
    // every single input -- bad for performance
    // also you are already on an input:text ie each() above
    elem.bind('focus', function () {
        elem.data('oldVal', elem.val());
        elem.data('oldLen', elem.data('oldVal').length);
    });
    elem.bind('input', function (event) {
        oldValue = elem.data('oldVal');
        elem.data('oldVal', elem.val());
        if (elem.val().length - elem.data('oldLen') > 1) {
            alert('Most certainly pasted');
        }
        elem.data('oldLen', elem.data('oldVal').length);
       foo(oldValue,elem.val());
    });
  });
}
$("input").blur(); 
// invoke it once for input0
updateEachFn();

这里有一个jsfiddle供您使用

相关文章：