Javascript jQuery&；引导显示密码不适用于动态表单

我试图使用jQuery和Bootstrap在动态创建的表单上显示/隐藏密码，但是我很难让脚本“看到”动态表单

我可以用按钮添加新的论坛输入，并且“眼睛”是可见的，但是点击眼睛不会切换密码的可见性

如何使每个输入元素都有自己的密码切换

如果能解释解决方案就太好了，因为我仍在学习JS，希望尽可能多地学习

这是我到目前为止所拥有的

删除
服务器
服务器

//克隆隐藏的元素并显示它
$（'.add one server'）。单击（function（）{
$（'.dynamic element server'）.first（）.clone（）.appendTo（'.dynamic stuff server'）.show（）；
附加_删除（）；
});
//附加功能以删除按钮
函数attach_delete（）{
$（'.delete'）.off（）；
$（'.delete'）。单击（函数（）{
控制台日志（“单击”）；
$（this）.closest（'.form group'）.remove（）；
});
}
$（“.password1”）.password({
眼类：“fa”，
eyeOpenClass:“fa eye”，
eyeCloseClass:“fa眼斜线”
});

您应该为每个添加的元素运行

password（）

函数。因此，为密码ID保留一个计数器。另外，不要在加载时运行

password（）

var计数器=1；
$（'.添加一台服务器'）。单击（函数（）{
计数器+=1；
var newElementId='password'+计数器；
var newElement=$（'.dynamic element server'）.first（）.clone（）；
newElement.find（'.password1'）.attr（'id'，newElementId）；
newElement.appendTo（'.dynamic stuff server'）.show（）；
附加_删除（）；
$（“#”+newElementId）.密码({
眼类：“fa”，
eyeOpenClass:“fa eye”，
eyeCloseClass:“fa眼斜线”
});
});
//附加功能以删除按钮
函数attach_delete（）{
$（'.delete'）.off（）；
$（'.delete'）。单击（函数（）{
控制台日志（“单击”）；
$（this）.closest（'.form group'）.remove（）；
});
}

删除
服务器
服务器

按照实现方式，您有多个密码字段，所有字段都具有相同的ID=“password1”，这是错误的。为密码字段指定一个类，并使用该类名选择所有密码字段。@NawedKhan哦，我忘了将其更改为类，但当它也是类时，您会得到相同的结果。这就像JS不识别实时注入的元素一样。它还需要以一种独特的方式针对密码字段，以避免同时显示所有密码输入。您需要使用事件委派在动态创建的元素上触发事件，正如Michael和Ercan所说，每次添加新克隆时，您都需要调用密码。我会将整个$（'.password1'）.password（）代码移动到一个函数中，并在onload上调用此函数，然后在add server函数中再次调用。感谢您提供此示例和解释，它可以按预期工作。