javascript - $(document).on ('focus' 或 $(document).bind ('input' ，不在动态添加的行上触发？

Question

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

发生这种情况，例如，单击“添加行”按钮，编辑新的“Apple”字段，并看到这不会更改 table2 上重复的“Apple”。

请参阅 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(); 

Answer 1

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

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

Corrected fiddle

另一个问题是您正在使用 $("input:text").each()。这只会处理页面加载时存在的元素。您不需要该循环，只需正常绑定(bind)事件处理程序即可。您不需要外部处理程序中的变量 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());
});