增加选择器名称

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

事件处理程序不是这样动态的。附加此处理程序的代码在页面加载时运行一次，并且当时仅找到匹配的元素。由于元素是在与页面交互期间动态添加的，因此事件委托似乎在这里很有用。

具体使用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 输入。

增加选择器名称

Increment the selector name

javascript

jquery

counter