Question

所以我有这个场景

当我加载表单时，我最初输入的是text类型。

该输入附加了“keyup”事件，如果用户输入了超过5个字符，则在输入元素之后注入新的输入文本，并且还解除当前元素的keyup事件。

HTML：

<form>
    <input id="input1" type="text" class="email-input" />
</form>

JQUERY：

$('.email-input').on({

    keyup: function() {
        if (this.value.length > 5)
        {
            var newInput = $("<input type='text' class='email-input' />");
            $('form').append(newInput);

            $(this).unbind('keyup');
        }
    }

});

我希望新创建的元素具有与最初创建的元素相同的功能。我如何实现这一目标？

Answer 1

将事件委托给FORM：

DEMO

$('form').on({    
    keyup: function() {
        if($(this).data('unbind')) return;
        if (this.value.length > 5)
        {
            var newInput = $("<input type='text' class='email-input' />");
            $('form').append(newInput);
            //used to filter event, you cannot unbind here delegated event just for specific element
            $(this).data('unbind',true);
        }
    }

},'.email-input');

Answer 2

您可以使用以下语法执行此操作：

$(document).on('keyup', '.email-input', function() {
    // code
});

示例：http://jsfiddle.net/922Yj/

或者将其委托给表格（而不是文件），就像之前的回答所说的那样。

Answer 3

试试这个

$（'。email-input'）。live（'keyup'，function（）{

//enter code here

}）;

jQuery：动态地将keyup附加到动态创建的输入

3 个答案: