Jquery/javascript:加载页面时不需要的重复函数

Question

我有一个基于用户通过单击功能创建某些div的Web应用程序。当用户添加div时，我还赋予他们删除所述功能的能力。每次用户添加div 时，它都会被推送到数组中。然后用户可以保存数组并在返回时加载它。

删除div的函数

嵌套在要添加的函数中，因为这是我发现使函数工作的唯一方法。

我遇到的问题是，我还必须在加载函数中调用 delete 函数，以使删除按钮在单击添加按钮之前工作。我尝试只是在任何一个函数之外调用函数，但由于一开始没有div。因此，当页面加载并单击删除按钮时，它会实现两次并破坏应用程序。

我是编程新手，我现在所做的主要是程序性的，所以任何输入工作都值得赞赏。我觉得我犯了一个菜鸟错误，伪代码在下面。

$(button).cick(function(){
    store div in array;
    add div to container;
    call remove function;
});
function loadPage() {
    retrieve stored array;
    add stored divs to container;
    call remove function;
}
loadPage();

Answer 1

您可以将删除操作委托给容器，如下所示：

$('#container').on('click', '.delete', function() {
    $(this).closest('div.className').remove();
    //here delete stored clone from array.
});

调整选择器以适合您的 HTML

这样，任何带有 class="delete" 的按钮在单击时，都将导致其包含div 的（内部）被删除（删除）。

• 该操作将应用于容器中的所有删除按钮，无论它们在附加此单击处理程序时是否就位，还是稍后插入。
• 如果（外部）容器本身未被删除（删除），则此委派操作将保持不变。

Answer 2

我认为如果您有单独的按钮来添加和删除会更容易。这样，您可以将一个按钮绑定到将div 添加到容器，另一个按钮用于删除上次推送的div。

这样的事情可能会有所帮助

  var listOfAddedDivs = [];
  $('.addDivButton').click(addNewDiv);
  $('.removeDivButton').click(removeCurrentDiv);

  function addNewDiv() {
     listOfAddedDivs.push('<div> something </div>');
     updateContainer(listOfAddedDivs);
  }
  function removeCurrentDiv() {
    if(listOfAddedDivs.length >0) {
          listOfAddedDivs.pop();
      }
      updateContainer(listOfAddedDivs);
  }
  function updateContainer(arrayContainingDivs) {
   $('.container').html(arrayContainingDivs.join(' '));
  }