时间戳

首页 > 解决方案 > 删除元素后简单的按钮功能停止

jquery - 删除元素后简单的按钮功能停止

问题描述

我是 jQuery 新手，我正在尝试创建一组简单的测试行，并能够通过单击添加按钮来创建新行，并通过单击相应的“删除”文本来删除每一行。出于某种原因，每当删除第一行时，我就无法再添加新行。

这是HTML：

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='all'>
  <button class='add'>Add</button>
  <div class='row'>hi - <span class='del'>delete</span></div>
</div>

和 jQuery：

var row, add, rows;

$(document).ready(function(){  
  row = $('.row'); // problem? because it's not a clone?
  add = $('.add');
  rows = $('.row');
  add.on("click", function(){
    row.clone().appendTo($('#all')); // problem? because it's now gone?
    rows = $('.row');
    updateRows();
  });
});

function updateRows() {
  rows.on("click", ".del", function(){
    $(this).parent().fadeOut(1000, function(){
      $(this).remove();
    });
    rows = $('.row');
  });
}

如果有帮助，我还制作了CodePen 演示。所以我的问题是，为什么删除第一行后“添加”按钮停止工作？我想知道一旦第一行被删除，它就不能被追加，因为变量被删除了，如果我是对的，你怎么能创建一个即使被删除也能保留的变量克隆（如果你知道我的意思)?

感谢您在这里的任何帮助 - 任何解释将不胜感激。

标签： jquery

解决方案

您可以复制该行的 outerHTML 以使其始终可用。仅使用$(".row").first().html()复制内部 HTML（因此不包括该class=row部分）。

这给了你：

var row = $(".row").first().outerHTML(); // store first row
$('.add').on("click", function() {
  $("#all").append(row); 
});

复制 outerHTML 取自：https ://stackoverflow.com/a/4180972/2181514

当您对 del 按钮使用事件委托时，您只需要调用一次，给出：

(function($) {
  $.fn.outerHTML = function() {
    return $(this).clone().wrap('<div></div>').parent().html();
  };
})(jQuery);

$(document).ready(function() {
  var row = $(".row").first().outerHTML(); // store first row
  $('.add').on("click", function() {
    $("#all").append(row);
  });

  $(document).on("click", ".row>.del", function() {
    $(this).closest(".row").fadeOut(1000, function() {
      $(this).remove();
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='all'>
  <button class='add'>Add</button>
  <div class='row'>hi - <span class='del'>delete</span></div>
</div>

更新代码笔： https ://codepen.io/anon/pen/qLQqJm

推荐阅读