javascript - JQuery 中的表单复制问题

Question

我有一个 div，它允许用户通过单击 + 图标动态添加表单。一切正常，除了当我关闭模式并重新打开它时，输入字段和按钮重复。

例如:我打开模式，单击加号，然后出现一个新输入。我关闭模态并重新打开它，输入消失了。太棒了!

但是，当我再次打开模式后单击 + 图标时，会添加两个输入而不是一个。如果我重复该过程(关闭模式，重新打开，然后单击加号)，将出现三个输入，然后是四个，依此类推，直到刷新页面。

这些字段被附加到一个简单的 div，我不明白为什么每次我重新打开模式并点击 + 时添加的字段数量都会递增。非常感谢任何帮助。

var i = 1;

// When the user cicks the + icon, a new input and dropdown list will appear

$("#new_rule").click(function() {

//markup for the input form
var user = "<div class='users'><input type='text' name='name' placeholder='name' class='form-control input" + i + "' style='margin-top:5px;'></div>"

//Markup for the dropdown
var perm = "<div class='permissions'><div class='btn-group input" + i + "' style='padding-top:4px;'><button type='button' name='options' id='options' class='btn btn-danger dropdown-toggle' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'><span id='selected" + i + "'><span id='text'>Read</span></span></button><div class='dropdown-menu'><a class='dropdown-item 'href='#'>Read</a><a class='dropdown-item' href='#'>Write</a><a class='dropdown-item' href='#'>Full Control</a><a class='dropdown-item remove' href='#'>Remove</a><div class='dropdown-divider'></div><a class='dropdown-item' href='#'>Learn More</a></div></div>";

//Concat the markup and append it to the wrapper
var input = user + perm;
console.log(input);
// Append the markup to the wrapper
$(".wrapper").append(input);
// Update the dropdown to reflect what they selected
$('.dropdown-menu a').click(function() {
  // $('#text').text($(this).text());
  $(this).parent().siblings('button').find('span').text($(this).text());
})
i++
//Show the save button when a new entry is initially added.
$("#save").show();
});


// Clear forms when the x is clicked
$(".close").click(function() {
  $("input[name='name']").remove();
  $("button[name='options']").remove();
  $(".users").remove();
  $(".permissions").remove();
  $("p.index").remove();
  $("p.value").remove();
  $("#save").hide();
});

Answer 1

我很确定 #new_rule 元素始终在页面上(即使模式关闭时也是如此)但是每次打开模式时都需要重新附加事件处理程序:

$("#new_rule").click(function() {

当您这样做时，jQuery 不会替换 事件处理程序；它只会添加新的。因此，您最终会运行同一函数的多个副本。

要么只添加该函数一次(而不是在模式打开时)，要么确保在添加新函数之前删除旧副本。