Javascript AppendTo，但每个新的AppendTo都是唯一的，但仍然使用相同的jquery

我想知道是否有可能在每个附录上添加一个新的div，使其唯一，但仍然使用相同的jquery

正如您在下面的标记中所看到的，每个新div共享相同的jquery，因此不能独立工作

在我的Javascript中，我选择启动每个函数的ID

我尝试在每个ID的末尾添加+1 etc，但这样会更改ID的名称，从而使新创建的DIV不起作用

我曾经考虑过使用DataAttributes，但是我仍然有同样的问题，必须创建多个函数来完成相同的工作

有什么想法吗

谢谢

$（函数（）{
var检验=$（“#p#U检验”）；
变量i=$（'p#u test.upl_drop'）。长度+1；
$（'#addtest'）。在（'click'，function（）上{
$（'Select a file…Remove
）.appendTo（test）；
i++；
});
$（'body'）。在（'click'，'remtest'，函数（e）上{
如果（i>2）{
$（this）.closest（'.file input'）.remove（）；
我--；
}
});
});
var input=document.getElementById（'file upload'）；
var infoArea=document.getElementById（'file upload filename'）；
addEventListener（'change'，showFileName）；
函数showFileName（事件）{
//change事件为我们提供了它发生的输入
var输入=event.src元素；
//输入在“files”属性中有一个文件数组，每个文件都有一个您可以使用的名称。我们只是在这里使用名称。
var fileName=input.files[0]。名称；
//但使用文件名最适合您的应用程序，即将其添加到div中
text内容='文件名：'+文件名；
$（“#输入文件触发器”）.text（函数（）{
返回$（this）.text（）.replace（“选择文件…”，textContent）；
});
}

/*
####拖放框####
*/
p_检验{
显示：内联块；
}
.upl_drop{
边框：2个虚线#000；
保证金：0px 0px 15px 0px；
}
.btn—添加p{
光标：指针；
}
.input文件容器{
位置：相对位置；
宽度：自动；
}
.input文件触发器{
显示：块；
填充：14px 45px；
背景：#ffffff；
颜色：#1899cd；
字号：1em；
光标：指针；
}
.输入文件{
位置：绝对位置；
顶部：0；左侧：0；
宽度：225px；
不透明度：0；
填充：14px0；
光标：指针；
}
.input文件：悬停+.input文件触发器，
.input file:焦点+.input file触发器，
.input文件触发器：悬停，
.input文件触发器：焦点{
背景：1899cd；
颜色：#ffffff；
}

选择一个文件。。。
添加

我建议不要使用增量

id

属性。他们成为一个痛苦的维持，也使逻辑比它需要的复杂得多

更好的替代方法是使用公共类和DOM遍历，以引发任何给定事件的类为基础，将元素彼此关联起来

在您的情况下，您可以使用

closest（）

获取父级

。文件输入

容器，然后通过其

类

查找该容器中的任何元素。大概是这样的：

$（函数（）{
var$test=$（'p#u test'）；
$（'#addtest'）。在（'click'，function（）上{
var$lastGroup=$test.find（'.file输入：last'）；
var$clone=$lastGroup.clone（）；
$clone.find（'.input file trigger'）.text（'Select a file…'）；
$clone.insertAfter（$lastGroup）；
});
$test.on（'click'，'.remtest'，函数（e）{
如果（$（'.file input'）.length>1）
$（this）.closest（'.file input'）.remove（）；
}).on（'change'，'input file'，函数（e）{
如果（！this.files）
返回；
var$container=$（this）.closest（'.file input'）；
$container.find（“.input file trigger”）.text（'file name:'+this.files[0].name）；
});
});
.p\u测试{
显示：内联块；
}
.upl_drop{
边框：2个虚线#000；
保证金：0px 0px 15px 0px；
}
.btn—添加p{
光标：指针；
}
.input文件容器{
位置：相对位置；
宽度：自动；
}
.input文件触发器{
显示：块；
填充：14px 45px；
背景：#ffffff；
颜色：#1899cd；
字号：1em；
光标：指针；
}
.输入文件{
位置：绝对位置；
排名：0；
左：0；
宽度：225px；
不透明度：0；
填充：14px0；
光标：指针；
}
.input文件：悬停+.input文件触发器，
.input file:焦点+.input file触发器，
.input文件触发器：悬停，
.input文件触发器：焦点{
背景：1899cd；
颜色：#ffffff；
}

选择一个文件。。。
添加
除了
id
之外，还有其他选择特定元素的方法。例如，单击
事件
会提供
事件。目标
，即被单击的元素不确定如何工作？当然，新创建的div不是唯一的，我仍然会有同样的问题。或者，您是说，与获取ID来使用函数相反，使用event.target来调用函数？