Jquery .one() function doesn't prevent multi click event during form input
by Artur Filipiak
HTML
<link rel="stylesheet" href="http://silviomoreto.github.io/bootstrap-select/bootstrap-select.min.css">
<script src="http://silviomoreto.github.io/bootstrap-select/bootstrap-select.min.js"></script>
<form id="some-items">
<div class="comment-form-gonder">
<input type="submit" value="Submit" class="btn btn-success" />
<button class="btn btn-primary unclick hidden" />Enable submit?</button>
</div>
</form>
<br>
<div id=output></div>
JavaScript
$(document).ready(function() {
$(".comment-form-gonder input[type='submit']").on("click", function(e) {
e.preventDefault();
if($(this).data('clicked') == 'clicked'){
$(".unclick").removeClass('hidden');
$(this).val('Already clicked!').addClass('btn-warning');
setTimeout(reVal, 1000, $(this));
}
if($(this).data('clicked') != 'clicked'){
$("#output").append('<span class="label label-danger">Submit disabled</span><br>');
$(this).removeClass('btn-success');
}
$(this).data('clicked', 'clicked');
});
$(".unclick").click(function(e) {
e.preventDefault();
$(this).addClass('hidden');
$(".comment-form-gonder input[type='submit']")
.data('clicked', '')
.val('Submit')
.addClass('btn-success');
$("#output").append('<span class="label label-success">Submit enabled</span><br>');
});
function reVal(el){
el.val('Submit').removeClass('btn-warning');
}
});