單擊發出的函數稱為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() ，而每次單擊“click”時都會添加一個單擊處理程序。 嘗試更新版本：

 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(); 

 .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>