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不会替换事件处理程序；它只会添加新的。因此，您最终会运行同一功能的多个副本。

要么仅添加一次该功能（而不是在模式打开时添加），要么确保在添加新功能之前删除旧副本。

JQuery中的表单复制问题

1 个答案: