增加选择器名称

Question

我有一个收集家庭成员个人信息的表格。有一个允许添加其他表单字段（SSN1，SSN2等）的按钮。我有一个格式化SSN的功能。当我尝试向其添加计数器时，如果用户添加其他SSN字段，则该功能还将格式化其他字段。

        var counter = 1;
        $("##SSN"+counter).keyup(function() {
                counter++;
                var val = this.value.replace(/\D/g, '');
                var newVal = '';
                var sizes = [3, 2, 4];

                for (var i in sizes) {
                  if (val.length > sizes[i]) {
                    newVal += val.substr(0, sizes[i]) + '-';
                    val = val.substr(sizes[i]);
                  }
                  else
                    break;       
                }

                newVal += val;
                this.value = newVal.substr(0,11);
            }).focusout(function(){
                showRequiredDatabaseCheck();

            });

Answer 1

once，并且此时仅查找匹配的元素。由于元素是在与页面交互期间动态添加的，因此听起来似乎在这里事件委托很有用。

特别是使用jQuery的.on()。

[为了简化起见，我们还应该删除counter（因为它的唯一目的是标识id），而改用class。给您的输入一个通用的class，例如ssn-input：

<input type="text" class="ssn-input" />

（或者无论您如何构建输入，这只是一个示例。）

对于您的事件处理程序，不要将其直接附加到输入本身（因为在页面首次加载时它们尚不存在），而是将它们附加到已经存在的公共父元素上。任何父元素都可以，但是在本示例中，我们将一直沿层次结构一直到document：
$(document).on('keyup', '.ssn-input', function() {
    // the event handler logic you already have
});

在这种情况下，.on()的第二个参数是处理事件时要使用的一种过滤器。由于事件是附加到document的，因此处理程序将捕获达到该级别的

all

keyup事件。当使用可选过滤器时（此处为'.ssn-input'），处理程序将忽略任何并非源自该匹配过滤器的事件。

因此，在这种情况下，当您向页面添加更多时，一个事件处理程序应涵盖所有SSN输入。