Question

我正在通过jquery和bootstrap创建一个确认对话框。当用户单击“是”或“否”时，它应该执行某些操作。例如每次都绘制两个正方形。第一次单击``是''或``否''按钮时它绘制2个正方形，但是当我重复它时，第二次尝试绘制四个正方形，第三次尝试绘制六个正方形...此外到以前的方块。 HTML 请点击 jQuery

    $('button').click(function() {
    optionsArrSize = 2;
    customConfirm(function (confirmed) {
        if (confirmed) {

            //do somethings
        }

        for (var i = 0; i < optionsArrSize; i++) {
            $('body').append('<div style=" display: inline-block;width: 30px;height: 30px;margin:5px;background: blue"><div>')

        }
    })
})
function customConfirm(callback) {
    var confBox="<div class='modal fade' tabindex='-1' role='dialog' aria-labelledby='mySmallModalLabel'  id='myModal'>" +
        "    <div class='modal-dialog modal-sm'>" +
        "        <div class='modal-content'>" +
        "            <div class='modal-header'>" +
        "                <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>" +
        "                <h4 class='modal-title' id='myModalLabel'>warning</h4>" +
        "            </div><div class='modal-body'>Draw Two squares?</div>" +
        "            <div class='modal-footer'>" +
        "                <button type='button' class='btn btn-default btnYes' id='btnYes'>Yes</button>" +
        "                <button type='button' class='btn btn-primary btnNo' id='btnNo'>No</button>" +
        "            </div>" +
        "        </div>" +
        "    </div>" +
        "</div>" +
        "<div class='alert' role='alert' id='result'></div>";
    $('.appendBox').append(confBox);
    $('#myModal').modal('show');
    $(document).on('click','.btnYes',function () {
        callback(true);
        $("#myModal").modal('hide');
    });
    $(document).on('click','.btnNo',function () {
        callback(false);
        $("#myModal").modal('hide');

    });
}

    $('button').click(function() {
        optionsArrSize = 2;
        customConfirm(function (confirmed) {
            if (confirmed) {

                //do somethings
            }

            for (var i = 0; i < optionsArrSize; i++) {
                $('body').append('<div style=" display: inline-block;width: 30px;height: 30px;margin:5px;background: blue"><div>')

            }
        })
    })
    function customConfirm(callback) {
        var confBox="<div class='modal fade' tabindex='-1' role='dialog' aria-labelledby='mySmallModalLabel'  id='myModal'>" +
            "    <div class='modal-dialog modal-sm'>" +
            "        <div class='modal-content'>" +
            "            <div class='modal-header'>" +
            "                <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>" +
            "                <h4 class='modal-title' id='myModalLabel'>warning</h4>" +
            "            </div><div class='modal-body'>Draw Two squares?</div>" +
            "            <div class='modal-footer'>" +
            "                <button type='button' class='btn btn-default btnYes' id='btnYes'>Yes</button>" +
            "                <button type='button' class='btn btn-primary btnNo' id='btnNo'>No</button>" +
            "            </div>" +
            "        </div>" +
            "    </div>" +
            "</div>" +
            "<div class='alert' role='alert' id='result'></div>";
        $('.appendBox').append(confBox);
        $('#myModal').modal('show');
        $(document).on('click','.btnYes',function () {
            callback(true);
            $("#myModal").modal('hide');
        });
        $(document).on('click','.btnNo',function () {
            callback(false);
            $("#myModal").modal('hide');

        });
    }

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button">Click</button>
<div class="container appendBox"></div>
</body>
<html>

Answer 1

因为，您正在button单击上创建蓝框。因此，当您单击click按钮和yes按钮时，也会为no按钮调用代码。

仅当单击确认中的yes按钮而不是$('button').click(function() {时，才添加蓝盒创建代码。

Answer 2

每次执行customConfirm时，新的侦听器都将附加到文档（不删除旧的侦听器）。不是循环执行了太多次，而是这个函数：

        $(document).on('click','.btnYes',function () {
            callback(true);
            $("#myModal").modal('hide');
        });

也许将其重构为类似的内容

$('.btnYes').off('click').on('click', // old handler here

Answer 3

您需要使用.one，因此点击仅注册一次：

    // USE .one TO PREVENT ANY DUPLICATE ONCLICK EVENT LISTENER
    $(document).one('click','.btnYes',function () {
        callback(true);
        $("#myModal").modal('hide');
    });

这里是working example。

已将答案更新为改用.one －评论者对我建议的unbind的使用有确实的担心。工作示例代码也已更新

Answer 4

我刚更改：

$(document).on('click','.btnYes',function () {

收件人：

 $(document).find('#myModal').on('click','.btnYes',function () {

并使用html（）代替append（）; 它工作正常。如果我们在$（document）上使用unbide（）或one（），则文档的其他按钮将被禁用。

$(document).ready(function(){
      
        $(document).on('click','#sq',function() {
            optionsArrSize = 2;
            customConfirm(function (confirmed) {
                if (confirmed) {

                    console.log(optionsArrSize)
                }

                for (var i = 0; i < optionsArrSize; i++) {
                    $('body').append('<div style=" display: inline-block;width: 30px;height: 30px;margin:5px;background: blue"><div>')

                }
            })
        })
        function customConfirm(callback) {
            var confBox="<div class='modal fade' tabindex='-1' role='dialog' aria-labelledby='mySmallModalLabel'  id='myModal'>" +
                "    <div class='modal-dialog modal-sm'>" +
                "        <div class='modal-content'>" +
                "            <div class='modal-header'>" +
                "                <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>" +
                "                <h4 class='modal-title' id='myModalLabel'>warning</h4>" +
                "            </div><div class='modal-body'>Draw Two squares?</div>" +
                "            <div class='modal-footer'>" +
                "                <button type='button' class='btn btn-default btnYes' id='btnYes'>Yes</button>" +
                "                <button type='button' class='btn btn-primary btnNo' id='btnNo'>No</button>" +
                "            </div>" +
                "        </div>" +
                "    </div>" +
                "</div>" +
                "<div class='alert' role='alert' id='result'></div>";
            $('.appendBox').html(confBox);
            $('#myModal').modal('show');
            $(document).find('#myModal').on('click','.btnYes',function () {
                callback(true);
                $("#myModal").modal('hide');
            });
            $(document).find('#myModal').on('click','.btnNo',function () {

                callback(false);
                $("#myModal").modal('hide');

            });
        }
    })

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" id='sq'>Click</button>
<div class="container appendBox"></div>
</body>
<html>

如何解决我的问题，我的for循环比其步骤重复更多

4 个答案: