Question

我通过点击按钮在我的页面上动态创建文本输入。一切都很好。

对于所有现有元素（页面加载时呈现的元素），我正在收听按键事件以添加/删除这样的类：

$("input[type='text'], input[type='email'], input[type='number'], input[type='search'], input[type='password'], input[type='tel'], textarea").keyup(function (event) {
    if (event.which != 13) {
        if ($(this).val().length >= 1) {
            $(this).parent().addClass('active');
        } else {
            if ($(this).val().length == 0) {
                $(this).parent().removeClass('active');
            }
        }
    }
});

同样，一切都很好 - 当我输入一个输入时 - 相应地添加/删除该类。

当我单击按钮添加更多字段（例如，“添加其他名称”）时，我还想听按键事件。我试过这个但没有运气。

$('body').on('click', $("input[type='text'], input[type='email'], input[type='number'], input[type='search'], input[type='password'], input[type='tel'], textarea"), function (event) {
    if (event.which != 13) {
        if ($(this).val().length >= 1) {
            $(this).parent().addClass('active');
        } else {
            if ($(this).val().length == 0) {
                $(this).parent().removeClass('active');
            }
        }
    }
});

有没有办法让动态创建的元素监听按键事件？谢谢你的任何建议！

修改

对于找到此主题的其他人来说，这是最终方法的样子。

$('body').on('keypress', "input[type='text'], input[type='email'], input[type='number'], input[type='search'], input[type='password'], input[type='tel'], textarea", function (event) {
    if (event.which != 13) {
        if ($(this).val().length >= 1) {
            $(this).parent().addClass('active');
        } else {
            if ($(this).val().length == 0) {
                $(this).parent().removeClass('active');
            }
        }
    }
});

Answer 1

https://api.jquery.com/on/

在第一个参数处，在keypress旁边添加click以获取按键事件。此外，您无需将选择器包裹在$( ... )。

周围

希望这有帮助。

Answer 2

这就是你想要的：

＆＃13;

$('.commonclass').keypress(function(event){       
   if (event.keyCode != 13) {
        if ($(this).val().length >= 1) {
            $(this).parent().addClass('active');
        } else {
            if ($(this).val().length == 0) {
                $(this).parent().removeClass('active');
            }
        }
    }
});

＆＃13;

{{1}}

＆＃13;

相反，你可以给他们所有的课，并使用它：

{{1}}

在动态创建的元素上侦听按键事件？

2 个答案: