Javascript 将jquery事件侦听器添加到一系列唯一元素中

我试图用jQuery编写一个函数，它将在已经存在的一系列唯一输入旁边创建一系列新输入。该函数应向每个新输入添加事件侦听器，以便在其值发生变化时（例如，输入了某些内容），其旁边的原始输入值具有相同的值

最后，我将简单地隐藏原始表单，以便最终用户只看到新表单。我这样做是为了能够控制用户可以查看/修改表单的哪些部分，并且能够更好地控制表单的外观。我之所以必须这么做，是因为我必须这么做，是因为我正在修改一个Microsoft Sharepoint项目创建表单，修改它的唯一方法是向页面添加javascript。如果有更好的办法，我洗耳恭听。我对编码比较陌生，对Sharepoint中的编码也非常陌生

不管怎么说，我的情况如下：

    var inputIdArr = [
    'OrigInput1', 
    'OrigInput2',
    'OrigInput3',
    'OrigInput4',
    'OrigInput5',
    'OrigInput6',
    'OrigInput7'
    ];

function newInputs(arr) {
    for (str in arr) {
        var elem = $( "[id='" + inputIdArr[str] + "']" );
        var parent = elem.parent();
        var newInputId = `newInput${str}`
        var newInput = `<input type='text' id=${newInputId} />`;

        parent.append(newInput);
        $( `[id=${newInputId}]` ).change(function() {
            console.log(newInputId + " changed");
            elem.val($( `[id=${newInputId}]` ).value);
        });
    }
}

$(document).ready(function(){
    newInputs(inputIdArr);
});

var inputIdArr=[
“OrigInput1”，
“OrigInput2”，
“OrigInput3”，
“OrigInput4”，
“OrigInput5”，
“OrigInput6”，
“OrigInput7”
];
功能输入（arr）{
用于（arr中的str）{
var elem=$（“[id=”+inputIdArr[str]+“]”）；
var parent=elem.parent（）；
var newInputId=`newInput${str}`
var newInput=`；
parent.append（newInput）；
$（`[id=${newInputId}]`）.change（function（）{
console.log（newInputId+“已更改”）；
元素val（$（`[id=${newInputId}]`）.value）；
});
}
}
$（文档）.ready（函数（）{
新输入（inputIdArr）；
});

---

目前，控制台总是记录“newInput7已更改”。我不知道如何修复它，以便它记录正确的新输入已更改。我还可以在完成后使用指南指导去哪里。

以编程方式跟踪动态创建元素的生成ID是一种反模式，会导致不必要的冗长代码和维护问题

相反，您可以通过简单地使用类和DOM遍历将元素分组并相互关联，使逻辑更加简洁和可扩展，如下所示：

$（'input.orig'）。在（''）之后；
$（'#container'）。on（'input'，'input.added'，function（）{
$（this.prev（'.orig'）.val（this.value）；
})

。追加{
边框：1px实心#C00；
}
输入{
显示：块；
保证金：2倍；
}

---

这应该给您一个粗略的开始，我已经创建了7个原始字段，您的函数成功地创建了新字段。我在循环之外的新字段上添加了事件或绑定，因为我认为存在一些问题

//字段选择
变量inputIdArr=[
“OrigInput1”，
“OrigInput2”，
“OrigInput3”，
“OrigInput4”，
“OrigInput5”，
“OrigInput6”，
“OrigInput7”
];
//用于创建新字段的函数
功能输入（arr）{
用于（arr中的str）{
var elem=$（“[id=”+inputIdArr[str]+“]”）；
var parent=elem.parent（）；
var newInputId=`newInput${str}`
var newInput=`；
parent.append（newInput）；
}
}
//在dom ready上创建新输入
$（文档）.ready（函数（）{
新输入（inputIdArr）；
});
//绑定新输入并将值发送到组织输入
$（文档）.on（'input'，'id^=“newInput”]'，函数（el）{
$（this.prev（）.val（$（this.val（））；
});
输入：第n个子（1）{边框：1px实心红色；}
输入：第n个子（2）{边框：1px纯蓝色；}

像这样使用选择器$（“input[id^='OrigInput']），然后它就会工作。你也可以粘贴html。@KresimirPendic sharepoint html是迄今为止我见过的人类可读性最低的html。这真的没有多大帮助。那么你可以使用jquery？任何版本？@SudarpoChong如果有CDN，我可以使用它。我没有把它包括在代码示例中。做得很好！我同意id维护中令人头疼的部分这里有一个id的示例：“'Title_fa376e0f-0c70-4ab9-b863-0288e6ddd247_$TextField'”这就是我最初将它们放在数组中的原因。所有输入的ID似乎都是随机生成的。我应该在这之前澄清一下。如果我使用jQuery向每个元素添加相同的类，会怎么样？我想我还是得手动追踪身份证。一点也不。上面的代码对
id
属性是完全不可知的，这就是关键所在。您已经可以通过
$（this）
和
$（this）.prev（'.orig'）
访问相关输入。你根本不需要
id
。啊，好的。我以前很困惑，但我现在开始工作了。谢谢