Jquery：最近（）行删除不起作用

Question

我有一个脚本，它添加一组行以允许您在 SharePoint 列表表单中为其他访问者捕获信息。我有两个锚标签，一个用于添加，另一个用于删除。当我添加一个新访问者时它可以工作，当我删除访问者时它仍然有效，但是如果我再次尝试添加它会带回之前删除的行加上新添加的行。有谁知道我该如何解决这个问题？

我写的脚本和源码：

function addVisitor(sender) {
    var newVisitor = "<tr class='newVisitor'><td nowrap='true' valign='top' width='113px' class='ms-formlabel'><span class='ms-h3 ms-standardheader' ><nobr>Visitor name</nobr></span></td><td valign='top' width='350px' class='ms-formbody'><span dir='none'><input type='text'  maxlength='255'  title='Visitor name' class='ms-long ms-spellcheck-true'><br></span></td></tr><tr><td nowrap='true' valign='top' width='113px' class='ms-formlabel'><span class='ms-h3 ms-standardheader' ><nobr>Visitor surname</nobr></span></td><td valign='top' width='350px' class='ms-formbody'><span dir='none'><input type='text'  maxlength='255'  title='Visitor surname' class='ms-long ms-spellcheck-true'><br></span></td></tr><tr><td nowrap='true' valign='top' width='113px' class='ms-formlabel'><span class='ms-h3 ms-standardheader' id='Visitor_x0020_email'><nobr>Visitor email*</nobr></span></td><td valign='top' width='350px' class='ms-formbody'><span dir='none'><input type='text' value='' maxlength='255'  title='Visitor email Required Field' style='ime-mode : ' class='ms-long ms-spellcheck-true'><br></span></td></tr><tr style='display:none;' class='vReg'><td nowrap='true' valign='top' width='113px' class='ms-formlabel'><span class='ms-h3 ms-standardheader' id='Vehicle_x0020_registration'><nobr>Vehicle registration</nobr></span></td><td valign='top' width='350px' class='ms-formbody'><span dir='none'><input type='text' value='' maxlength='255' title='Vehicle registration' style='ime-mode : ' class='ms-long ms-spellcheck-true'><br></span></td>" + addBtn + "</tr>";

    $(newVisitor).insertAfter(sender);
if (hideReg)
    $('.vReg').hide();
else
    $('.vReg').show();

$('.add').on('click', function () {
    var sender = $(this).closest('tr')[0];
    $(this).hide();
    addVisitor(sender);
    $('.add').hide();
    $('.add:last').show();

});

$('.remove').on('click', function () {
    var sender = $(this).closest('tr')[0];
    $(this).hide();
    $('.add').hide();
    removeVisitor(sender);
    $('.add:last').show();
});

}

function removeVisitor(sender) {
    var rowPos = $(sender).index();
    $(sender).remove(); // remove current
   // $('.ms-formtable tr').eq(rowPos - 1);
    for (var i = 1; i<=4; i++) {
        $($('.ms-formtable tr')[rowPos - i]).remove();
    }      

}

Answer 1

您应该将事件附件移出addVisitor 方法。

$('.remove').on('click', function () { ... }

还有

$('.add').on('click', function () { ... }

否则，应用程序将出现错误行为，因为每次代码调用方法 addVisitor 时，它都会为事件添加一个新的处理程序，从而导致在用户单击元素时多次调用回调函数使用 .add 或 .remove 类。

所以生成的代码是：

function addVisitor(sender) {
    var newVisitor = "<tr class='newVisitor'><td nowrap='true' valign='top' width='113px' class='ms-formlabel'><span class='ms-h3 ms-standardheader' ><nobr>Visitor name</nobr></span></td><td valign='top' width='350px' class='ms-formbody'><span dir='none'><input type='text'  maxlength='255'  title='Visitor name' class='ms-long ms-spellcheck-true'><br></span></td></tr><tr><td nowrap='true' valign='top' width='113px' class='ms-formlabel'><span class='ms-h3 ms-standardheader' ><nobr>Visitor surname</nobr></span></td><td valign='top' width='350px' class='ms-formbody'><span dir='none'><input type='text'  maxlength='255'  title='Visitor surname' class='ms-long ms-spellcheck-true'><br></span></td></tr><tr><td nowrap='true' valign='top' width='113px' class='ms-formlabel'><span class='ms-h3 ms-standardheader' id='Visitor_x0020_email'><nobr>Visitor email*</nobr></span></td><td valign='top' width='350px' class='ms-formbody'><span dir='none'><input type='text' value='' maxlength='255'  title='Visitor email Required Field' style='ime-mode : ' class='ms-long ms-spellcheck-true'><br></span></td></tr><tr style='display:none;' class='vReg'><td nowrap='true' valign='top' width='113px' class='ms-formlabel'><span class='ms-h3 ms-standardheader' id='Vehicle_x0020_registration'><nobr>Vehicle registration</nobr></span></td><td valign='top' width='350px' class='ms-formbody'><span dir='none'><input type='text' value='' maxlength='255' title='Vehicle registration' style='ime-mode : ' class='ms-long ms-spellcheck-true'><br></span></td>" + addBtn + "</tr>";

    $(newVisitor).insertAfter(sender);
    if (hideReg)
        $('.vReg').hide();
    else
        $('.vReg').show();       
}

function removeVisitor(sender) {
    var rowPos = $(sender).index();
    $(sender).remove(); // remove current
   // $('.ms-formtable tr').eq(rowPos - 1);
    for (var i = 1; i<=4; i++) {
        $($('.ms-formtable tr')[rowPos - i]).remove();
    }            
}


$('.add').on('click', function () {
    var sender = $(this).closest('tr')[0];
    $(this).hide();
    addVisitor(sender);
    $('.add').hide();
    $('.add:last').show();

});

$('.remove').on('click', function () {
    var sender = $(this).closest('tr')[0];
    $(this).hide();
    $('.add').hide();
    removeVisitor(sender);
    $('.add:last').show();
});