如何使用jQuery和“本”来捕捉变化的表单元素值

Question

我有以下的代码，每一个元素发生变更我的web的表单中时间的工作原理：

<!-- 

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文件**

// 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

据我的理解，是指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 2

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

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

你不想开始与$（本），你需要选择你想要监控的输入。然后你可以在change（）函数中使用$（this）。

James Allardice指出，您可能指的是带有$（this）的窗体，并且change（）事件会捕获窗体中的所有更改。我建议你更具体地针对更改后的元素，以便不捕获不需要或不需要的元素的更改事件，这可以消除意外的行为。您可以使用像:input这样的类或表单选择器来定位它们。

Answer 3

你会做这样的事情你改变里面以下

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

Answer 4

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

$(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 5

尝试使用jQuery 1.7

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

DEMO

Answer 6

方法如下：this

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

Answer 7

为了使用$（本），你必须有一个预定义的JavaScript对象。这就是为什么它叫这。

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

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

或

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

总之，你需要选择一个元素，并创建一个对象，你可以使用$（本）前。

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