代码正在跳转到一个未调用的函数

Question

我有这个代码，我可以在其中填写不同数量的订单。我可以创建更多输入以创建更多数量来计算它们。但是由于某种原因，当我在其中一个中按 Enter 键以创建另一个输入/条目时，它会进入重置功能，该功能会擦除每个字段。它不应该在按键时调用重置函数。

var intId = 0;
var maindiv = $("#maindiv");
var divpeso ="";
var inputnumber ="";
var fieldname = "";
var removeButton = "";


function anadir_input() {
    // var lastField = $("#container div:last");
    intId = intId + 1;
    divpeso = $("<div class=\"input-group mb-3\" id=\"divpeso" + intId + "\"/>");

    inputnumber = $("<input id=\"peso" + intId + "\" type=\"number\" class=\"form-control\" name=\"peso" + intId + "\" maxlength=\"5\" size=\"5\" step=\".01\" />");
    fieldname = $("<div class=\"input-group-append\"><span class=\"input-group-text\">Peso" + intId + "</span></div>");
    removeButton = $("<input type=\"button\" class=\"btn btn-outline-danger\" value=\"Quitar\" />");

    removeButton.click(function () {
        $(this).parent().remove();
    });
    inputnumber.keypress(function (e) {
           if (e.which == 13) {
           console.log("enter apretado");
        }
    });

    divpeso.append(inputnumber);
    divpeso.append(fieldname);
    divpeso.append(removeButton);
    $("#container").append(divpeso);
};

$(document).ready(function () {

    $("#anadir").click(function () {
        anadir_input();
    });

    $("#reset").click(function () {
        console.log("reset");
        $('[id*=divresultado]:visible').each(function () {
            $(this).remove();
        });
        $('[id^=peso]:visible').each(function () {
            $(this).val('');
        });
        $('[id^=divpeso]:visible').each(function () {
            $(this).remove();
        });
        intId = 0;
    });


    $("#resultado").click(function () {
        var pesosordenados = [];
        var capacidad = Number($("#capacidad").val());
        var pesos = [];
        capacidad = $("#capacidad").val();
        $('[id*=divresultado]:visible').each(function () {
            $(this).remove();
        });
        $('[id^=peso]:visible').each(function () {
            if ($(this).val() != 0 || $(this).val() != null || $(this).val() != undefined)
                pesos.push($(this).val());
            pesosordenados = pesos.sort(function (a, b) {
                return b - a
            });
        });

        var contenedores = [];
        var sobrepesos = [];

        //algoritmo para rellenar los contenedores con los distintos pesos.
        while (pesosordenados.length > 0) {
            var unidadcontenedor = [];
            var pesosnousados = [];
            var restcapacidad = Number(capacidad);
            for (var i = 0; i < pesosordenados.length; i++) {
                if (Number(pesosordenados[i]) > capacidad) { //si el peso es mas grande que la capacidad del contenedor
                    sobrepesos.push(Number(pesosordenados[i]));
                } else {
                    if (Number(pesosordenados[i]) <= restcapacidad && restcapacidad >= pesosordenados[pesosordenados.length - 1]) {
                        unidadcontenedor.push(Number(pesosordenados[i]));
                        restcapacidad = restcapacidad - Number(pesosordenados[i]);
                    } else {
                        pesosnousados.push(pesosordenados[i]);
                    }
                }

            }
            contenedores.push(unidadcontenedor);
            pesosordenados = pesosnousados;
        }


        for (var m = 0; m < contenedores.length; m++) {
            var divresultado = $("<div id=\"divresultado\" class=\"calculadora\"></div>");
            var titulo = $("<h5 class=\"card-title\">Contenedor " + (Number(m) + 1) + "</h5>");
            var contpesorelleno = $("<h5 class=\"card-title\">Peso cargado: " + contenedores[m].reduce((a, n) => (a + Number(n)), 0) + "</h5>");
            var contpesolibre = $("<h5 class=\"card-title\">Peso libre: " + (Number(capacidad) - Number(contenedores[m].reduce((a, n) => (a + Number(n)), 0))) + "</h5>");

            divresultado.append(titulo);
            divresultado.append(contpesorelleno);
            divresultado.append(contpesolibre);
            for (var n = 0; n < contenedores[m].length; n++) {
                var resultfield = $("<div class=\"input-group-append\"><span class=\"input-group-text\">" + contenedores[m][n] + "</span></div>");
                divresultado.append(resultfield);
            }
            maindiv.append(divresultado);
        }


//para sumar toda una array: arrayloquesea.reduce((a, n) => (a + Number(n)), 0)


    });


});

你有JSFiddle here。

重现步骤：

-按下绿色按钮“Añadir peso”。

-点击创建的输入框并回车。

创建了另一个输入字段，但重置功能将它们全部删除。

编辑：

我在 html 中使用 type="reset" 以及在 js 的按键功能中使用 e.preventDefault(); 解决了这个问题。但是，它不会显示带有结果的 div maindiv.append(divresultado);。

Answer 1

一切都很好，只是在重置按钮中缺少 type="reset"。

  <button type="reset" id="reset" class="btn btn-danger cincuw">Reset</button>

Answer 2

不，它没有重置，你没有提供输入值开始，你的 js $("#anadir").click() 函数应该是这样的：

$("#anadir").click(function () {
     anadir_input($('input[name="capacidad"]').val());
});

和anadir_input函数应该把传入的输入值：

function anadir_input(inputValue) {
    // var lastField = $("#container div:last");
    intId = intId + 1;
    divpeso = $("<div class=\"input-group mb-3\" id=\"divpeso" + intId + "\"/>");

    inputnumber = $("<input id=\"peso" + intId + "\" type=\"number\" class=\"form-control\" name=\"peso" + intId + "\" maxlength=\"5\" size=\"5\" step=\".01\" value='"+inputValue+"' />");
    fieldname = $("<div class=\"input-group-append\"><span class=\"input-group-text\">Peso" + intId + "</span></div>");
    removeButton = $("<input type=\"button\" class=\"btn btn-outline-danger\" value=\"Quitar\" />");

    removeButton.click(function () {
        $(this).parent().remove();
    });
    inputnumber.keypress(function (e) {
           if (e.which == 13) {
           console.log("enter apretado");
        }
    });

    divpeso.append(inputnumber);
    divpeso.append(fieldname);
    divpeso.append(removeButton);
    $("#container").append(divpeso);
};

我已更改您的小提琴以查看输出差异：https://jsfiddle.net/z4sgnr28/

我希望它有意义