增加选择器名称答案

【问题标题】：Increment the selector name增加选择器名称
【发布时间】：2020-05-19 19:19:20
【问题描述】：

我有一个收集家庭成员个人信息的表格。有一个按钮允许附加表单字段（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();

            });

【问题讨论】：

##SSN 真的是那个吗？一个# 还不够吗？
我强烈建议对所有 SSN 使用单个类而不是 ID 并增加数字。
这是在 Coldfusion 页面上，所以需要额外的 #。
@user2072347：如果 Coldfusion 是服务器端，则将 ## 替换为单个 #，如果您尝试专注于客户端功能，那么最好将其分开他们俩。上面的问题完全是关于 JavaScript（使用 jQuery），所以在尝试诊断问题时，您最好通过检查生成的客户端代码来为自己服务，这样您就可以将 Coldfusion 从等式中分离出来。话虽如此......究竟是什么在这里不起作用？我看不出您在哪里描述问题或提出问题。
@David：我遇到的问题是客户端。当用户添加增加 1 的附加字段时，我还希望上面的脚本增加，以便每个添加的 SSN 字段都将由脚本格式化。

标签： javascript jquery counter

【解决方案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，所有 keyup 冒泡到该级别的事件将被此处理程序捕获。当使用可选过滤器（此处为'.ssn-input'）时，处理程序将忽略任何不是源自该匹配过滤器的事件。

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

【讨论】：

谢谢。解释很有帮助。