查找更改的表单元素答案

【问题标题】：Find changed form element查找更改的表单元素
【发布时间】：2017-10-06 09:10:28
【问题描述】：

我正在使用 jQuery 表单更改事件

$('form').change(function(e) {
  alert('hello');
});

我想知道触发了哪个表单更改事件的元素 ID。

【问题讨论】：

您尝试过什么来实现这一目标？

标签： jquery forms events element

【解决方案1】：

要实现这一点，您可以在form 元素上使用委托处理程序，该处理程序侦听子表单控件上的change 事件。

然后您可以在事件处理程序中使用 this 关键字来引用引发事件的元素，如下所示：

$('form').on('change', ':input', function() {
  console.log(this.id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" id="foo" />
  <input type="text" id="bar" />
</form>

或者，您可以将当前的 change 事件处理程序保留在 form 上，并依赖事件使 DOM 冒泡，并使用事件的 target 属性来确定导致事件的元素：

$('form').change(function(e) {
  console.log(e.target.id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" id="foo" />
  <input type="text" id="bar" />
</form>

【讨论】：

【解决方案2】：

$('form').change(function(e) {
  alert($(this).attr('id'));
});

这是如果您想了解它是哪种形式。如果您想了解哪种输入以哪种形式，那么这必须更改。查看其他人添加的上述答案。

【讨论】：

【解决方案3】：

你可以使用 $(e.target).attr('id'): DEMO ATTACHED

$('form').on('change', function(e) {

 alert("$(e.target).attr('id'): " +  $(e.target).attr("id"))
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" id="textBox1" placholder="textBox1"/>
  <input type="text" id="textBox2" placholder="textBox1"/>
</form>

【讨论】：