javascript - Jquery:最近()行删除不起作用

Question

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

我写的脚本和源码:

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();
});