重复几次链接添加和删除后，添加新的输入.为什么

repeat several times link add and remove after add new input. why?

本文关键字：添加 删除 为什么 输入 链接 几次      更新时间：2023-09-26

为什么每次add和remove之后，new input链接remove和add重复几次?
如:removeremoveremoveremove或addaddaddaddaddaddadd和...

示例(添加输入并查看):http://jsfiddle.net/zgWr3/6/

$(function () {
    $('a.add_input').live('click', function (event) {
        event.preventDefault();
        var $class = '.' + $(this).closest('div.find_input').find('div').attr('class');
        var newDiv = $(this).closest($class).clone();
        $(this).closest($class).find('.add_input').remove()
        //$(this).find('.adda').remove()
        newDiv.find('.adda .mediumCell').append('<a href="" class="remove_input">remove</a>')
        newDiv.find('input').each(function () {
            $(this).prop('checked', false).val('');
        });
        $($class + ':last').after(newDiv);
        //newDiv.remove('.adda')
        //alert(newDiv)
    });
    $('a.remove_input').live('click', function (event) {
        event.preventDefault();
        var $class = '.' + $(this).closest('div.find_input').find('div').attr('class');
        $(this).closest($class).prev().find('.adda .mediumCell').append('<a href="" class="add_input">add</a>')
        $(this).closest($class).remove();
    });
});

您正在克隆包含链接的div，然后添加另一个。

编辑:好吧，你克隆div然后添加它，并追加remove_link(和类似的add_link在remove)。第一次没有联系时，它就起作用了。第二次调用clone()时链接存在，因此添加了一个副本。第三次有2个链接，你再添加一个。等等。

最好在函数之外构建整个HTML字段，如: 
var divHTML = ''
  <div class="field">'
    <input type="text"/>'
    <a class="remove_link">Remove</a>'
  </div>';

…然后只需在函数中添加$(divHTML)，而不是像现在这样复杂的克隆/追加/操作函数。无论如何，可能有一种更简单、更直接的方法。

编辑2:像这样

var divHTML = ''
  <div class="mediumCell">'
    <input type="text" name="price" placeholder="hello" title="تعرفه"'
     class="numeric" style="width: 70px;">'
    <a class="remove_input" href="#">remove</a>'
  </div>';
$('a.add_input').live('click', function (event) {
   event.preventDefault();
   $(divHTML).insertBefore($(this));      
});
$('a.remove_input').live('click', function (event) {
   event.preventDefault();
   $(this).closest('.mediumCell').remove();
});
编辑3:

好吧，你总是可以使用你原来的add函数，只是在那里扔一个not()过滤器，所以链接只被添加到第一个克隆:

newDiv.find('.adda .mediumCell').not(':has(.remove_input)').append('<a href="" class="remove_input">remove</a>')

每次单击此代码中的"add"链接时，都要添加一个新的"remove"链接:

newDiv.find('.adda .mediumCell').append('<a href="" class="remove_input">remove</a>')

注释它工作得很好，但你没有任何"删除"链接。我建议您在活动事件之外添加"remove"链接，并在需要时在那里操作它。

相关文章：