Javascript 另一个单击函数中的单击函数被多次调用

我第一次接触jquery时遇到了这样一个问题：我正在尝试创建一个动态输入表单。单击函数创建一个新的列表项，其中嵌套了另一个单击函数（为单击的项提供删除函数）

当我执行嵌套的click函数时，它似乎被称为已创建的实例数

下面是代码（我试图删除尽可能多的内容，但我不太确定错误在哪里-所以我想我留下了很多东西-抱歉）

$（“#添加元素”）。单击（函数（e）{
e、 预防默认值（）；
var prefix=“表格-
var last=$（“#IngredientForm ul li”）.last（）.html（）；
$（“#InCreditForm ul”）。追加（“
”+last+”
”）；
变量名称=$（“#IngredientForm ul li:上次输入”）.attr（“名称”）；
名称=名称。替换（前缀“”）；
var count=parseInt（名称[0]）；
计数+=1；
$（“上次输入”）.attr（“名称”，前缀+计数+“-weight”）
$（“#InCreditForm ul li:last select”）.attr（“名称”，前缀+计数+“-成分”）
$（“上次输入”）.attr（“id”，“id”+前缀+计数+“-权重”）
$（“#InCreditForm ul li:last select”）.attr（“id”、“id”+前缀+计数+“-成分”）
$（“#id_form-TOTAL_FORMS”）.val（计数+1）；
$（“.DeleteComponent”）。单击（函数（e）{
e、 预防默认值（）；
var aktuell=$（this）.closest（'li'）；
var-formCount；
name=aktuell.children（'input'）.attr（“name”）；
名称=名称。替换（前缀“”）；
计数器=名称。替换（“-weight”，”）；
formCount=parseInt（$（“#id_form-TOTAL_FORMS”）.val（）；
aktuell.remove（）；
--formCount；
$（“#id_form-TOTAL_FORMS”）.val（formCount）；
对于（var i=parseInt（counter）；i每次外部“单击”事件发生时，您都在为“.deleteComponent”元素添加另一个“单击”处理程序。
.click
函数不会删除以前分配的事件处理程序

您可以使用
.unbind
或者使用新版本的jQuery，
.off
来摆脱旧的处理程序：

$('.deleteIngredient').unbind('click').click(function(event) {
  // ...
});

不，问题是，这里我想您可能想绑定到为新配料添加的
.deleteComponent
按钮。您得到的代码-基于对
$（“.deleteComponent”）的引用
-将影响该类页面上的所有元素。我猜您正在为每个
添加按钮或其他内容。因此，您可能应该在新添加的结构中查找按钮：

$('#IngredientForm ul li:last .deleteIngredient').click(function(event) {
  // ...
});

每次外部“单击”事件发生时，您都在为“.DeleteComponent”元素添加另一个“单击”处理程序。
.click
函数不会删除以前分配的事件处理程序

您可以使用
.unbind
或者使用新版本的jQuery，
.off
来摆脱旧的处理程序：

$('.deleteIngredient').unbind('click').click(function(event) {
  // ...
});

不，问题是，这里我想您可能想绑定到为新配料添加的
.deleteComponent
按钮。您得到的代码-基于对
$（“.deleteComponent”）的引用
-将影响该类页面上的所有元素。我猜您正在为每个
添加按钮或其他内容。因此，您可能应该在新添加的结构中查找按钮：

$('#IngredientForm ul li:last .deleteIngredient').click(function(event) {
  // ...
});

每次外部“单击”事件发生时，您都在为“.DeleteComponent”元素添加另一个“单击”处理程序。
.click
函数不会删除以前分配的事件处理程序

您可以使用
.unbind
或者使用新版本的jQuery，
.off
来摆脱旧的处理程序：

$('.deleteIngredient').unbind('click').click(function(event) {
  // ...
});

不，问题是，这里我想您可能想绑定到为新配料添加的
.deleteComponent
按钮。您得到的代码-基于对
$（“.deleteComponent”）的引用
-将影响该类页面上的所有元素。我猜您正在为每个
添加按钮或其他内容。因此，您可能应该在新添加的结构中查找按钮：

$('#IngredientForm ul li:last .deleteIngredient').click(function(event) {
  // ...
});

每次外部“单击”事件发生时，您都在为“.DeleteComponent”元素添加另一个“单击”处理程序。
.click
函数不会删除以前分配的事件处理程序

您可以使用
.unbind
或者使用新版本的jQuery，
.off
来摆脱旧的处理程序：

$('.deleteIngredient').unbind('click').click(function(event) {
  // ...
});

不，问题是，这里我想您可能想绑定到为新配料添加的
.deleteComponent
按钮。您得到的代码-基于对
$（“.deleteComponent”）的引用
-将影响该类页面上的所有元素。我猜您正在为每个
添加按钮或其他内容。因此，您可能应该在新添加的结构中查找按钮：

$('#IngredientForm ul li:last .deleteIngredient').click(function(event) {
  // ...
});

请改用此格式

$("#addIngredient").on('click', function() {
   $(this).off();
});

请改用此格式

$("#addIngredient").on('click', function() {
   $(this).off();
});

请改用此格式

$("#addIngredient").on('click', function() {
   $(this).off();
});

请改用此格式

$("#addIngredient").on('click', function() {
   $(this).off();
});

这个街区

$(".deleteIngredient").click(function(e){...

将clickevent附加到所有
.DeleteComponent
元素，以及之前创建的元素

您必须将此块置于
#addingredent
的单击事件之外。您可以将删除事件附加到以后添加的每个元素

$("#addIngredient").click(function(e){
    // ...
});

$(document).on("click", ".deleteIngredient", function(e){
    // ...
});

这个街区

$(".deleteIngredient").click(function(e){...

将clickevent附加到所有
.DeleteComponent
元素，以及之前创建的元素

您必须将此块置于
#addingredent
的单击事件之外。您可以将删除事件附加到以后添加的每个元素

$("#addIngredient").click(function(e){
    // ...
});

$(document).on("click", ".deleteIngredient", function(e){
    // ...
});

这个街区

$(".deleteIngredient").click(function(e){...

附加clic