如何使用 jQuery 和“this”来捕获更改的表单元素值答案

【问题标题】：How to use jQuery and 'this' to capture changed form element value如何使用 jQuery 和“this”来捕获更改的表单元素值
【发布时间】：2012-03-06 19:36:15
【问题描述】：

每当我的网络表单中发生元素更改时，我都有以下代码：

<!--

jQuery.support.cors = true; // needed for ajax to work in certain older browsers and versions

$(document).ready(function(){

    $(this).change(function(){
        alert('form element changed!');
    });

}); // end .ready()

//-->

我一直在苦苦挣扎的是如何捕获 表单字段元素 id、name 和 changed value 何时触发更改事件。

谁能帮我解决这个问题？

谢谢！

** JAVASCRIPT 文件 **

// Sarfraz
$(this).change(function(){
   var id, name, value;
   id = this.id, name = this.name, value = this.value;
    alert('id=' + id); // this returns 'undefined'
    alert('name=' + name); // this returns 'undefined'
    alert('value=' + value); // this returns 'undefined'
});
//

// rjz
$(this).change(function(){
  var $this = $(this),
    id = $this.attr('id'),
    name = $this.attr('name'),
    value = $this.val();

    alert(id); // this returns 'undefined'
    alert(name); // this returns 'undefined'
    alert(value); // this returns blank
});

// Jamie
$(this).change(function(){
    var id = $(this).attr('id');
    var name = $(this).attr('name');
    var value = $(this).attr('value');

    alert('id=' + id); // this returns 'undefined'
    alert('name=' + name); // this returns 'undefined'
    alert('value=' + value); // this returns 'undefined'
});
//

//James Allardice
$(this).change(function(e) {
    var elem = e.target;
    alert('elem=' + elem); // this returns 'objectHTMLTextAreaElement'
});
//

// Surreal Dreams
$("#my-form input").change(function(){
    alert('form element changed!');
    var value = $(this).val();
    var id = $(this).attr("id");
    var name = $(this).attr("name");

    alert(id); // nothing happens
    alert(name); // nothing happens
    alert(value); // nothing happens
});
//

//Jamie - Second Try
$('.jamie2').each(function() {
    $(this).change(function(){
        var id = $(this).attr('id');
        alert(id); // nothing happens
    });
});
//

【问题讨论】：

在您的示例中this 是什么？
"this" 是 javascript 中的保留字，对吗？
是的，但它的含义是上下文相关的。
您通常在与所选元素相关的代码中使用 $(this)，例如，在事件处理程序中引用具有事件的元素。
@Dr.DOT，当在 jQuery 事件处理程序（和其他一些方法）范围之外引用时，$(this) 通常是无效的（除非您将其设置为其他内容）。您应该改用选择器，如 Surreal Dreams 的回答所示。

标签： jquery onchange

【解决方案1】：

我认为你可能从一开始就有问题：

$("#myform input").change(function(){
    alert('form element changed!');
    var value = $(this).val();
    var id = $(this).attr("id");
    var name = $(this).attr("name");
});

您不想从 $(this) 开始，您需要选择要监控的输入。然后你可以在 change() 函数中使用 $(this)。

James Allardice 指出，您可能使用 $(this) 来引用表单，而 change() 事件将捕获表单中的所有更改。我建议您更具体地针对您更改的元素，这样您就不会在不需要或不想要的元素上捕获更改事件，这可能会消除意外行为。您可以使用 :input 之类的类或表单选择器来定位它们。

【讨论】：

我会同意这一点，直到 DOT 博士提供额外信息说明您为什么要将更改绑定到“this”而不是特定输入。 ;-) 我想不出$(this).change() 的好用例，但这并不意味着没有。
@GregPettit - 由于this 引用form 元素，您可以将change 事件处理程序绑定到它，它将捕获由它的任何后代触发的更改事件（因为它们将冒泡到form)。就像使用带有选择器参数的 on 一样。看我的回答。
如果 DOT 博士提供了一些澄清，我一定会进行更新。在 DOT 博士这里发表评论，以便我得到一张便条来检查它。
@SurrealDreams - 当我尝试你的建议时，什么也没发生。请参阅我附加到我的答案的代码
@JamesAllardice Gotcha；我认为this 是输入，而不是表单。但是，我仍然认为选择表单元素并对其进行绑定更改比摆弄“this”作为起点要容易。

【解决方案2】：

据我了解，this 指的是 form 元素，您希望获得对触发事件的 form 元素的后代的引用。

如果正确，可以使用事件对象的target 属性：

$(this).change(function(e) {
    var elem = e.target;
});

这是working example。

在上面的代码中，elem 将引用触发事件的元素。然后您可以访问该元素的属性，例如id：

$(this).change(function(e) {
    var elemId = e.target.id;
});

【讨论】：

我在尝试您的示例时得到了“objectHTMLTextAreaElement”。请参阅我附加到我的问题的代码。
@Dr.DOT - 试试alert(e.target.id);。 e.target 为您提供实际元素。然后，您可以访问它的属性。我用另一个例子更新了我的答案。
雅虎@JamesAllardice。到目前为止，你让我最接近。我只看到了ID名称。我将用你的样本来玩一些。我会回来报告的。你是个明星。其他所有在这里插话的人也是如此。谢谢大家！！！
@Dr.DOT - 很高兴你取得了一些进展:)
@JamesAllardice...我刚刚在 3 天的车轮旋转中第一次提醒了更改的值。非常感谢！

【解决方案3】：

为了使用 $(this)，您必须有一个预定义的 JavaScript 对象。这就是为什么它被称为this。

所以你需要做这样的事情：

$('.class_name').each(function() {
    $(this).change(function(){
        var id = $(this).attr('id');
    });
});

或

$('.class_name').click(function() {
    $(this).change(function(){
        var id = $(this).attr('id');
    });
});

简而言之，您需要先选择一个元素并创建一个对象，然后才能使用 $(this)。

【讨论】：

@Jaimie。您的每个示例代码都返回“未定义”。请参阅我附加到我的问题的代码。
谢谢@Jaimie...但还是没有运气。请参阅我附加到我的问题的代码。
非常感谢您帮助我。我也能够通过 James Allardice 的e.target.id 回答得到我所设定的内容。我非常感谢您的帮助。最好的问候。

【解决方案4】：

您将在更改中执行以下操作

var ELEMEMT = $('#IDOFELEMENT').val();

【讨论】：

非常感谢您帮助我。我也能够通过 James Allardice 的e.target.id 回答得到我所设定的内容。我非常感谢您的帮助。最好的问候。

【解决方案5】：

您可以按如下方式直接访问属性：

$(this).change(function(){
  var id = this.id,
    name = this.name,
    value = this.value;
});

或者，jQuery 提供了帮助函数来从 jQuery 集合中的第一个元素中检索这些属性：

$(this).change(function(){
  var $this = $(this),
    id = $this.attr('id'),
    name = $this.attr('name'),
    value = $this.val();
});

【讨论】：

您的第一个示例与 Sarfraz 相同。你的第二个例子我也测试过。两个样本都返回未定义。在我的问题中查看我的 JS 代码。
非常感谢您帮助我。我也可以通过 James Allardice 的e.target.id 回答得到我所设定的内容。我非常感谢您的帮助。最好的问候。

【解决方案6】：

方法如下：

$(this).change(function(){
   var id, name, value;
   id = this.id; name = this.name; value = this.value;
});

【讨论】：

谢谢@Sarfraz。几天前我试过你的版本，但又试了一次。请参阅附加到我的问题的代码。所有三个元素都返回“未定义”。
@Dr.DOT：您还需要澄清 this 在您的代码中指的是什么，什么 html 元素以及它是如何到达该代码的。
@Dr.DOT：是的，但是可以让它引用 JS 中的对象。这就是我要问它指的是什么对象？或者您正在使用 jQuery 抓取的元素？您需要在问题中编辑该信息。
非常感谢您帮助我。我也可以通过 James Allardice 的e.target.id 回答得到我所设定的内容。我非常感谢您的帮助。最好的问候。
@Dr.DOT：欢迎您并很高兴知道您的问题已解决:)

【解决方案7】：

尝试使用 jQuery 1.7

$(document).on('change','#myID',function(){
    alert('Id:'+this.id+'\nName:'+this.name+'\nValue:'+this.value);
});

DEMO

【讨论】：

我假设 #myID 是指我的
标签 ID。正确的？如果是这样，当我厌倦了你的建议时，什么都没有返回。
非常感谢您帮助我。通过 James Allardice 的e.target.id 答案，我也能得到我所设定的内容。我非常感谢您的帮助。最好的问候。

【解决方案8】：

好吧，我迟到了，除了评论形式，但只是为了后代：这是我对超现实梦想方法的扩展：

$("#myform").on('change', input, (function(){
    alert('form element changed!');
    var $this = $(this);
    var value = $this.val();
    var id = $this.attr("id");
    var name = $this.attr("name");
});

#myform 监听内部输入的变化。我还缓存了 jQuery 包装的 this。瞧！

【讨论】：