如何動態監聽現場

Question

改變我在我的形式幾個類似領域：

<select class="form-control" name="Ops[1][WorkCentre]">..</select> 
<select class="form-control" name="Ops[2][WorkCentre]">..</select> 
... 
<select class="form-control" name="Ops[n][WorkCentre]">..</select> 

我不知道有多少這樣的領域會出現，因爲用戶動態地添加字段。

當這些輸入中的任何一個改變時，我需要一些執行java腳本函數的方法，並且在那個函數內部我需要能夠訪問已經改變了關於'Ops'數組的輸入鍵。

我很高興使用jQuery。我在想像

$('select[name=Ops[i][WorkCentre]').change(function(i){ 
    // A function using i 
}); 

或者也許是一個java腳本事件監聽器？

任何幫助表示讚賞。

Answer 1

您可以使用事件委派：

// Listen for 'change' event on every element that has class 'form-control' 
$(document).on('change', 'select.form-control', function() { 
    var name = $(this).attr('name'); 
    // You code here ... 
}); 

UPDATE

爲了提取name屬性的數量，你可以設置名稱如下：

name="Ops_[1]_[WorkCentre]" 

和然後用'_'分割：

var number = $(this).attr('name').split('_')[1]; 

UPADATE＃2

更好的解決方案是設置在這樣的單獨的屬性的數目：

<select class="form-control" name="Ops[1][WorkCentre]" data-number="1">..</select> 

，然後檢索它像這樣：

var number = $(this).attr('data-number');