Javascript 添加时重复输入

该脚本的思想是向其添加节和文本框。如果我添加一个部分并向其中添加输入，则所有内容都会播放。然而，当我添加另一个时，其中一个的提示是重复的，我不知道为什么，我用代码来检查我的意思

$（“#添加#节”）。在（“单击”，函数（）{
var sectionid=$（“.sekcja”）.length；
$（“#sectionid”）.val（sectionid）；
var sectionwidth=提示（“节宽”）；
$（“#sectionwidth”）.val（sectionwidth）；
var sectionheight=提示（“截面高度”）；
$（“#截面高度”）.val（截面高度）；
var bg=提示（“部分背景色”）；
$（“#bg”）.val（bg）；
var sectioncolor=提示（“节字体颜色”）；
$（“#sectioncolor”）.val（sectioncolor）；
$（“#新#u节”）。追加（'添加文本'）；
$（“.add_text”）。在（“单击”，函数（）{
var inputid=$（'.sample'）.length；
$（“#inputid”）.val（inputid）；
var inputwidth=提示（“宽度文本区域”）；
$（“#inputwidth”）.val（inputwidth）；
$（this.parent（）.append（“”）；
});
如果（$（“.section”）.length>0）{
$（“#默认部分”）.css（“显示”、“无”）；
}
如果（截面宽度<1050）{
$（“.section”）.css（“float”，“left”）；
}
});

违约
添加部分
问题在这一行：

$(".add_text").on("click", function() {

每次单击“#add_section”，您都在将另一个单击事件处理程序添加到分配了“add_text”类的每个元素

我建议您为上面一行创建的按钮生成一个唯一的id，并使用该id分配click事件处理程序

例如：

var id=“cmd_”+Math.floor（Math.random（）*99999）；
$（“#新#u节”）。追加（'添加文本'）；
$（“#”+id）.on（“单击”，函数（）{
...
好的，问题是您的
$（“.add_text”）。在（“click”
上，会为页面上出现的每个类
元素触发事件。add_text
，这意味着您已经添加的输入字段越多，触发事件的次数就越多。解决方案是绑定和解除绑定事件处理程序。请检查以下代码：


$（“#添加#节”）。在（“单击”，函数（）{
var sectionid=$（“.sekcja”）.length；
$（“#sectionid”）.val（sectionid）；
var sectionwidth=提示（“节宽”）；
$（“#sectionwidth”）.val（sectionwidth）；
var sectionheight=提示（“截面高度”）；
$（“#截面高度”）.val（截面高度）；
var bg=提示（“部分背景色”）；
$（“#bg”）.val（bg）；
var sectioncolor=提示（“节字体颜色”）；
$（“#sectioncolor”）.val（sectioncolor）；
$（“#新#u节”）。追加（'添加文本'）；
$（'.add_text'）。取消绑定（'click'，addTextHandler）；
$（'.add_text'）.bind（'click'，addTextHandler）；
如果（$（“.section”）.length>0）{
$（“#默认部分”）.css（“显示”、“无”）；
}
如果（截面宽度<1050）{
$（“.section”）.css（“float”，“left”）；
}
});
var addTextHandler=函数（）{
var inputid=$（'.sample'）.length；
$（“#inputid”）.val（inputid）；
var inputwidth=提示（“宽度文本区域”）；
$（“#inputwidth”）.val（inputwidth）；
$（this.parent（）.append（“”）；
}

违约
添加部分
一种方法是您可以添加一个
id
，比如
@Pete
答案

如果您不想添加
id
，请移动
$（“.add_text”）。在外部（“单击”）
，并将其与
#新建_部分
绑定。请参见以下代码：

移动
$（“.add_text”）。在（“单击”，function（））；
外部和外部


$（“#添加#节”）。在（“单击”，函数（）{
var sectionid=$（“.sekcja”）.length；
$（“#sectionid”）.val（sectionid）；
var sectionwidth=提示（“节宽”）；
$（“#sectionwidth”）.val（sectionwidth）；
var sectionheight=提示（“截面高度”）；
$（“#截面高度”）.val（截面高度）；
var bg=提示（“部分背景色”）；
$（“#bg”）.val（bg）；
var sectioncolor=提示（“节字体颜色”）；
$（“#sectioncolor”）.val（sectioncolor）；
$（“#新#u节”）。追加（'添加文本'）；
如果（$（“.section”）.length>0）{
$（“#默认部分”）.css（“显示”、“无”）；
}
如果（截面宽度<1050）{
$（“.section”）.css（“float”，“left”）；
}
});
$（“#新建#节”）。在（“单击“，”。添加#文本”，函数（）{
var inputid=$（'.sample'）.length；
$（“#inputid”）.val（inputid）；
var inputwidth=提示（“宽度文本区域”）；
$（“#inputwidth”）.val（inputwidth）；
$（this.parent（）.append（“”）；
})；

违约
添加节
看起来像是将一个
单击
事件处理程序附加到
。每当有人单击“添加节”按钮时，添加文本
按钮。您应该移出
$（“.Add\u text”）。在（“单击”，函数（）{…}
click handler一节中的一部分。你的方法最简单，可能也是最有效的方法。它很有效，谢谢你
var id = "cmd_" + Math.floor(Math.random() * 99999);
$("#new_section").append('<div class="section" style="width: '+ sectionwidth +'px; min-height: '+ sectionheight +'px; background: #'+ bg +'; color: #'+ sectioncolor +';"><button type="button" id="' + id + '" class="add_text">Add text</button></div>');
$("#"+id).on("click", function() {
  ...