单击发出的函数称为x次按钮

Question

我遇到这个问题，每当用户点击“点击”几次，然后点击“发送”时，就会显示点击次数的消息。

例如，如果对话框打开5次，则显示5次消息。 面对这个问题几次绑定如何解决这个问题我不想学习快速修复。 但这是编码事物的好方法。

var test = {
        init: function() {
            $(".toggle-dialog").on("click", function() {
                $(".picture-upload-dialog").toggle("fast", function() {
                    if ($(this).is(":visible")) {
                        test2.uploadPicture()
                    }
                });
            });
        }
    },
    test2 = {
        uploadPicture: function() {
            var submitButton = $(".submit-picture");

            submitButton.on("click", function() {
                var fileVal = $("#fileToUpload").val();
                if (fileVal !== "") {
                    var ext = fileVal.split("."),
                        arrayExtensions = ["jpg", "jpeg", "png", "bmp", "gif"];

                    console.log(fileVal)
                    ext = ext[ext.length - 1].toLowerCase();

                    if (arrayExtensions.lastIndexOf(ext) == -1) {
                        test3.errorMessage(001)
                    }
                } else {
                    test3.errorMessage(002)
                }
            })
        }
    },
    test3 = {
        errorMessage: function(type) {
            var error;
            switch (type) {
                case 001:
                    error = "< Ext error >"
                    break;
                case 002:
                    error = "< No picture selected. >"
                    break;
                default:
                    return "ERROR"
            }
            $(".error").append(error)
        }
    }

test.init();

.picture-upload-dialog {
    display: none;
}

.toggle-dialog:hover {
    cursor: pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="error">

</div>
<div class="public-text-input">
    <div class="text-options">
        <i class="toggle-dialog ct icon-picture" title="Upload...">Click</i>
        <div class="picture-upload-dialog">
            <div class="picture-upload-header">
                Upload your picture
            </div>
            <div class="picture-upload-content">
                <input type="file" name="fileToUpload" id="fileToUpload">
                <button class="ct icon-picture submit-picture">SEND</button>
            </div>
        </div>
    </div>
    <div id="color-picker"></div>
</div>

Answer 1

这是因为您每次看到test2.uploadPicture()时都会调用它，而每次都会添加一个点击处理程序＆＃34;点击＆＃34;点击。尝试更新版本：

＆＃13;

＆＃13;

var test = {
        init: function() {
            test2.uploadPicture()
            $(".toggle-dialog").on("click", function() {
                $(".picture-upload-dialog").toggle("fast", function() {
                });
            });
        }
    },
    test2 = {
        uploadPicture: function() {
            var submitButton = $(".submit-picture");

            submitButton.on("click", function() {
                var fileVal = $("#fileToUpload").val();
                if (fileVal !== "") {
                    var ext = fileVal.split("."),
                        arrayExtensions = ["jpg", "jpeg", "png", "bmp", "gif"];

                    console.log(fileVal)
                    ext = ext[ext.length - 1].toLowerCase();

                    if (arrayExtensions.lastIndexOf(ext) == -1) {
                        test3.errorMessage(001)
                    }
                } else {
                    test3.errorMessage(002)
                }
            })
        }
    },
    test3 = {
        errorMessage: function(type) {
            var error;
            switch (type) {
                case 001:
                    error = "< Ext error >"
                    break;
                case 002:
                    error = "< No picture selected. >"
                    break;
                default:
                    return "ERROR"
            }
            $(".error").append(error)
        }
    }

test.init();

＆＃13;

.picture-upload-dialog {
    display: none;
}

.toggle-dialog:hover {
    cursor: pointer
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="error">

</div>
<div class="public-text-input">
    <div class="text-options">
        <i class="toggle-dialog ct icon-picture" title="Upload...">Click</i>
        <div class="picture-upload-dialog">
            <div class="picture-upload-header">
                Upload your picture
            </div>
            <div class="picture-upload-content">
                <input type="file" name="fileToUpload" id="fileToUpload">
                <button class="ct icon-picture submit-picture">SEND</button>
            </div>
        </div>
    </div>
    <div id="color-picker"></div>
</div>

＆＃13;

＆＃13;

＆＃13;