如何动态监听字段的变化

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

您可以使用事件委托：

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

如何动态监听字段的变化

How to dynamically listen for changes in field

javascript

jquery

jquery-events