$(document).on('focus'或$(document).bind('input'，不是在动态添加的行上触发吗? [英] $(document).on('focus' or $(document).bind('input', not trigger on dynamically added row?

问题描述

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

I used $(document).on('focus' or $(document).bind('input','input:text' so my method for automatically change duplicate input values from table1 to table2 via(keypress), but my code does not trigger,If the user will change the input (from new row) that was added to table dynamically.

例如，单击添加行按钮，编辑新的"Apple"字段，然后看到这不会更改表2上重复的"Apple".

This happen,for instance, click the Add row button,Edit the new "Apple" field and see that this will not change the duplicate "Apple" on table2.

有关演示，请参见 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().

.bind() doesn't take a selector argument, only .on() does. If you're binding to dynamically-added elements, you need to use .on().

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

校正的小提琴

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

The other problem is that you're using $("input:text").each(). That will only process the elements that existed when the page was loaded. You don't need that loop, just bind your event handlers normally. You don't need the variables elem and oldValue outside handlers; within the handler, $(this) is the element that the event was triggered on, and you can get oldValue from .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());
});

这篇关于$(document).on('focus'或$(document).bind('input'，不是在动态添加的行上触发吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！