如何使用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。瞧！