Question

我有一个关于课程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() {});吗？我试过但结果相同。

Answer 1

由于元素是动态生成的，因此change()无效，因此您应该使用第一个示例中显示的事件委派 .on() 来处理它们：

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

希望这有帮助。

Answer 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
我相信你能找到更多：）

Answer 3

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

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

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

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

关于选择者，最佳实践是指

for Unique elements使用＆＃34; ID＆＃34;
出于设计目的，使用＆＃34; class＆＃34;
for相似的动态元素使用＆＃34;属性＆＃34;

动态添加输入

3 个答案: