Question

我有一个设置文本框值的日期选择器。每次该文本框中的文本发生更改时，我都要提交表单。以下是我认为可以实现的代码片段：

$(document).ready(function() {
  watchDateFields();
}

function watchDateFields() {
  $('form .date_field').on('change', function() {
    this.form.submit();
  }
}

.date_field输入是动态设置的，但由于某种原因，这不会触发更改事件？

Answer 1

您需要将其附加到静态元素：

$(document).on('change', 'form .date_field', function() {
  this.form.submit();
}

或者，最好用静态的东西替换document。例如：

$('form').on('change', '.date_field', function() {
  this.form.submit();
}

或者您可能需要使用插件的事件处理程序附加事件，例如：

$('form .date_field').on('datechange', function() {
  this.form.submit();
}

Answer 2

change事件只会触发一次，即当用户在输入中输入新值然后将焦点移开时。

如果您希望在用户输入时更新此内容，请使用keydown事件。

但是，每次按下一个键时提交表单都不是一个好主意。你想要达到的结果是什么？在提交数据之前，至少要考虑验证输入或检查某些条件（例如，确保输入的长度至少为10个字符）。

Answer 3

将textfiels放在div元素中，并将change事件附加到此div：

$('#mydiv').on('change', '.date_field',  function(){
       this.form.submit();
});

现在，mydiv元素将监视其所有子元素的更改事件，无论它们是否是动态生成的。

Answer 4

$( "input" ).keyup(function() {
  //It's changed
});

在任何地方跟踪任何变化的简单方法...许多框架有2种数据绑定方式，在Javascript中使用keyup来观察更改......

jQuery UI日期选择器也有onSelect ...这么简单的方法来做你的工作......看看https://jqueryui.com/datepicker了解更多信息......

.on（'change'）不会触发动态文本框输入

4 个答案: