Question

这个javascript函数第一次，它发出警告为00 11 22 33（即正常）
当我第二次打电话给该功能时，它会发出警告，如00 11 22 22 33 33 33
当我第3次调用该功能时列出项目，它会发出警告为00 11 22 22 22 33 33 33 33 33
但我需要的是我第一次打电话，第一个结果应该提前谢谢你

function exampleAddOption1(val, dat, pr) {
    var cases = 0;
    var bottles = 0;
    var price = 0;
    alert("00");
    $('#itt').append('<option value = "' + dat + '">' + val + '</option>');
    $('#autocomplete').val("");
    $(".logindiv").css("display", "block");
    $("#case").focus();
    $("#case").keydown(function (e) {
        var code = e.which;
        if (code == 13) {
            $("#bottle").focus();
        }
    });
    $("#bottle").keydown(function (e) {
        var code = e.which;
        if (code == 13) {
            $(".lgbtn").focus();
        }
    });
    alert("11");
    $(".lgbtn").click(function () {
        if ($("#case").val() != "") {
            cases = $("#case").val();
        } else {
            cases = 0;
        }
        if ($("#bottle").val() != "") {
            bottles = $("#bottle").val();
        } else {
            bottles = 0;
        }
        $("#case").val("");
        $("#bottle").val("");
        $(".logindiv").css("display", "none");
        $('#qty').append('<option value = "' + cases + ',' + bottles + '">' + cases + 'Cs, ' + bottles + 'Btl</option>');
        cases = 0;
        bottles = 0;
        $(".logindiv2").css("display", "block");
        $("#price").val(pr);
        $("#price").focus();
        alert("22");
        $("#price").keydown(function (e) {
            var code = e.which;
            if (code == 13) {
                $(".lgbtn2").focus();
            }
        });
        $(".lgbtn2").click(function () {
            alert("33");
            price = $("#price").val();
            $('#amt').append('<option value = "' + price + '">' + price + '</option>');
            $(".logindiv2").css("display", "none");
            $("#autocomplete").focus();
        });
    });
}

Answer 1

您的问题可以简化为以下代码段。

＆＃13;

$("#test1").click(function () {
    console.log("1");
    $("#test2").click(function () {
        console.log("2");
        $("#test3").click(function () {
            console.log("3");
        });
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test1" type="button" value="test1"/>
<input id="test2" type="button" value="test2"/>
<input id="test3" type="button" value="test3"/>

＆＃13;

单击test1，test2，test3中的按钮。 test1 click为test2添加了一个处理程序。 test2 click为test3添加了一个处理程序。控制台日志将显示1,2,3。再次，单击test1，test2，test3顺序中的按钮。 test1 click为test2添加了另一个处理程序。 Test2现在有两个处理程序。单击test2时，将执行两个处理程序，每个处理程序为test3添加一个额外的处理程序。 Test3现在有三个处理程序。单击test2时，会执行三个处理程序。控制台日志将显示1,2,3,3,3,3。

一种可能的解决方案是在添加新的点击事件处理程序之前删除现有的点击事件处理程序。以下代码段演示了此解决方案。

＆＃13;

$("#test1").click(function () {
    console.log("1");
    $("#test2").off("click");
    $("#test2").click(function () {
        console.log("2");
        $("#test3").off("click");
        $("#test3").click(function () {
            console.log("3");
        });
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test1" type="button" value="test1"/>
<input id="test2" type="button" value="test2"/>
<input id="test3" type="button" value="test3"/>

＆＃13;

单击按钮test1，test2，test3。控制台显示1,2。3.再次单击按钮test1，test2，test3。控制台根据需要显示1,2,3。

如何在javascript中停止重复功能？

1 个答案: