Question

我使用$(document).on('focus' or $(document).bind('input','input:text'所以我的方法通过（keypress）自动将重复输入值从table1更改为table2，但是我的代码没有触发，如果用户将更改添加的输入（来自新行）动态地表。

例如，发生这种情况，单击添加行按钮，编辑新的“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()。如果您绑定动态添加的元素，则需要使用.on()。

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

Corrected fiddle

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

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

Answer 2

我重构了你的代码。 **注意：**动态添加元素时，您不应该有静态ID。 Ids应该是唯一的，因为您的输入将具有相同的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供您玩

$（document）.on（'focus'或$（document）.bind（'input'，不会触发动态添加的行？

2 个答案: