Question

我正在使用jQuery来动态添加和删除表单中的div部分。我可以添加新的部分，但当我去删除时，我有这些错误：

1）上一节的“添加”按钮应该重新出现（通过切换）。事实并非如此。

2）我通过克隆前一部分来添加部分。没有问题。我可以删除该部分，问题1.如果我在此过程之后添加了一个部分，则所有先前删除的部分将重新出现，并附加部分。

(function ( $ ) {
    "use strict";

    $(function () {

    var addDimension = function(e) {
        e.preventDefault();

        var parent = $(this).parent();
        var clone = parent.clone(true);

        var next = Number(parent.attr('id')) + 1;
        clone.attr('id', next);

        parent.after(clone);

        $(this).toggle();

        $('.add').bind('click', addDimension);
        $('.remove').bind('click', removeDimension);
    }
    // Add a new Dimension to the form for saving
    $('.add').bind('click', addDimension);

    var removeDimension = function(e) {
            e.preventDefault();

            var parent = $(this).parent();
            var id = Number(parent.attr('id')) - 1;
            alert(parent);
            $('#'+id+' .add').toggle();

            parent.remove().end();
        }
        //Remove dimension
        $('.remove').bind('click', removeDimension);

    });

}(jQuery));

链接到jsFiddle。

Answer 1

您的问题在于如何在addDimension中应用事件处理程序。

使用$('.add').bind时，它会影响class="add"页面中的所有元素。

由于您已经将单击处理程序绑定到该类的现有元素，因此您正在复合事件处理程序。这意味着现有元素将在添加新元素时触发事件多次。

最常见的方法是使用事件委派将处理程序应用于固定资产并定位现有或新元素。

使用事件委派，移除bind内的addDimension个来电，并将现有的调用更改为以下格式：

$('#dimensions').on('click','.add', addDimension);

的 DEMO

Answer 2

三件事：

每次调用bind()方法时，它都会（再次）将回调附加到事件中。添加一些维度后，点击“添加维度”链接会多次调用您的函数addDimension()。应始终只调用一次（它解释了你的第二点）。而是使用事件委托来管理这种情况（请参阅方法on()的jQuery文档和下面的小提琴）。
每次删除维度时，都会显示上一维度的“添加维度”链接。只有在删除最后一个维度时才应该这样。
我通过使用jQuery方法prev()和next()来管理您的第一点，以便在类.dimension的元素中导航。

http://jsfiddle.net/W7pMe/4/

的实例

使用jQuery和克隆/删除后，DOM元素重新出现

2 个答案: