动态添加的输入答案

【问题标题】：Dynamic Added Inputs动态添加的输入
【发布时间】：2017-04-28 22:52:37
【问题描述】：

我有一个带有 validate 类的输入，并且我正在动态地添加更多具有相同类的输入。

$('body').on('change', $('.validade'), function() {
    var value = $(this).val();
    var IsValid = TestValue(value);
    console.log(IsValid);
});

所有添加的输入都会触发此工作事件，但不会带来值。如果我使用：

$(".validate").change(function(){
    var value = $(this).val();
    var IsValid = TestValue(value);
    console.log(IsValid);
});

该值可以，但仅适用于第一个输入。我应该把它放在$(document).ready(function() {}); 上吗？我试过了，结果一样。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

change() 不起作用，因为元素是动态生成的，因此您应该使用第一个示例中所示的事件委托 .on() 来处理它们：

$('body').on('change', '.validade', function() {
    var value = $(this).val();
    var IsValid = TestValue(value);
    console.log(IsValid);
});

希望这会有所帮助。

【讨论】：

【解决方案2】：

您将jQuery object 作为第二个参数传递给on，但您可以阅读here，这应该是selector：

$(element).on( events [, selector ] [, data ], handler )

因此，您可以想象@Zakaria 的解决方案会起作用（如果您使用 jQuery +1.7），否则您需要改用delegate。

与stackoverflow相关：

Event binding on dynamically created elements?
In jQuery, how to attach events to dynamic html elements?
JQuery .on() isn't binding click events to dynamically created elements
我相信你能找到更多:)

【讨论】：

【解决方案3】：

如果您的 Java Script 代码在您将使用的 HTML 标记之前开始，那么您需要这个 - $(document).ready(function() {}); - 对尽快开始工作的引擎说。（onload 事件稍后发生，当所有内容（例如图像）也已加载时）。如果 js 代码放在 HTML 结尾，那么这个函数就没有意义了。

但是对于动态生成的元素，你必须使用

$(document).on('action','selector',function(){});

$(document).on('change', 'selector', function() {
    var value = $(this).val();
    var IsValid = TestValue(value);
    console.log(IsValid);
});

关于选择器，最佳实践表明

对于唯一元素使用“ID”
出于设计目的使用“类”
对于类似的动态元素，请使用“属性”

【讨论】：