javascript - 如何动态监听字段的变化

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

或者也许是一个 Javascript 事件监听器？

感谢任何帮助。

Answer 1

您可以使用事件委托(delegate):

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

更新

为了从名称属性中提取数字，您可以按如下方式设置名称:

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

然后用“_”分割:

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

更新#2

更好的解决方案是在单独的属性中设置数字，如下所示:

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

然后像这样检索它:

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