Question

我有以下代码，每次在我的网络表单中发生元素更改时都会起作用：

<!--

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 ，名称和更改后的值触发更改事件时。

任何人都可以帮我解决这个问题吗？

谢谢！

** JAVASCRIPT FILE **

// 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
    });
});
//

Answer 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等类或表单选择器来定位它们。

Answer 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;
});

Answer 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）。

Answer 4

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

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

Answer 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();
});

Answer 6

使用jQuery 1.7进行尝试

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

DEMO

Answer 7

以下是：

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

Answer 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。瞧！

如何使用jQuery和'this'来捕获更改的表单元素值

8 个答案: