1
私はこの問題に直面しています。ユーザーが「クリック」を数回クリックしてから「送信」をクリックするたびに、メッセージのクリック回数が表示されます。x timesボタンと呼ばれる問題関数がクリックされました
たとえば、ダイアログボックスが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>
試し 'テキスト（）'や 'htmlの（）' 'の代わりにAPPEND（）' ' – charlietfl
submitButton.on（ "クリック"、関数の（）{：更新されたバージョンをお試しください'これは、クリックするたびにクリックイベントをバインドし、コードをinitに移動するだけです。 – Keith
' uploadPicture'が呼び出されるたびにイベントハンドラを再バインドする理由はありますか？ページはロードされますか？ –