Jquery - 删除后附加

Question

按键＆＃34;，＆＃34;我添加新输入，当我使用退格键时删除了最后一个输入，但是当我再次按下时删除所有输入＆＃34;，＆＃34;代码返回所有输入，而不是一个。如何解决？

http://jsfiddle.net/3r79hyoL/

$(".multipleField").keyup(function(e) {
var key = e.which ? e.which : event.keyCode;
if (key == 110 || key == 188) {
    e.preventDefault();
    var value = $(this).val();
    $(this).val(value.replace(",", ""));
    $(this).first().clone().appendTo(".multipleFields").focus().val("");
    event.preventDefault();

    $(this).addClass('makeBorder');
    replaceAndCopy();

}

if (key == 8) {
    e.preventDefault();
    if ($(".multipleFields").last().val() == "" && $(".multipleField").length > 1) {
        $(".multipleField").last().remove();
        $(".multipleField").last().focus();
    }
}
});

function replaceAndCopy() {
$(".multipleField").keyup(function(e) {
    var key = e.which ? e.which : event.keyCode;
    if (key == 110 || key == 188) {
        e.preventDefault();
        var value = $(this).val();
        $(this).val(value.replace(",", ""));
        $(this).clone().appendTo(".multipleFields").focus().val("");

        $(this).addClass('makeBorder');

        replaceAndCopy();

    }

    if (key == 8) {
        if ($(".multipleFields").last().val() == "" && 
$(".multipleField").length != 1) {
            $(".multipleField:last").remove();
            e.preventDefault();

            $(".multipleField").last().focus();
        }
    }
});
}

Answer 1

问题是您要将新事件侦听器附加到每个输入。因此，当您返回不是最后一个的输入时，该事件将被触发多次。

function replaceAndCopy() {
// Add new event listener to all inputs, instead of the last
// $(".multipleField").keyup(function(e) {
// Change to
$(".multipleField").last().keyup(function(e) {
    var key = e.which ? e.which : event.keyCode;
    if (key == 110 || key == 188) {
        e.preventDefault();
        var value = $(this).val();
        $(this).val(value.replace(",", ""));
        $(this).clone().appendTo(".multipleFields").focus().val("");

        $(this).addClass('makeBorder');

        replaceAndCopy();

    }

    if (key == 8) {
        if ($(".multipleFields").last().val() == "" && $(".multipleField").length != 1) {
            $(".multipleField:last").remove();
            e.preventDefault();

            $(".multipleField").last().focus();
        }
    }
});