撕掉我的头发。
这是我的按钮
<button type="submit" class="btn btn-primary ladda-button" data-style="zoom-in">
<span class="ladda-label">
Submit
</span>
</button>
使用
Ladda.bind('.ladda-button', { timeout: 2000 });
或
Ladda.bind('button[type=submit]');
的效果与Chrome相同,但不适用于Safari。
我唯一能够上班的是
var l = Ladda.create( document.querySelector('.ladda-button'));
$(document).on('click', '.ladda-button', function() {
l.start();
});
显示了微调器,但表单未提交。
所以我试过这个
var l = Ladda.create( document.querySelector('.ladda-button'));
$(document).on('click', '.ladda-button', function() {
l.start();
$(this).submit();
});
但它不起作用;表格不会提交。不知道该做什么,因为我在codepen和SO中也尝试了很多例子,但没有一个正在工作;微调器拒绝显示。
找到一个hacky解决方案,但它不一致。
$('form').submit(function (e) {
var l = Ladda.create(document.querySelector('.ladda-button'));
l.start();
alert();
});
但是,如果我删除alert()
,则微调器不会显示;并且旋转器也没有完全位于按钮的中心位置。
此时秃顶......
如果我有一些干扰正常提交流程的东西,它确实有效。
在我的注册页面中,我有一个Sweet Alert,可以通过返回确认进行激活。 Ladda按钮工作得很好,所以Safari可能会在正常流程中跳过发射的Ladda?
<div class="form-group text-center m-t-30">
<button class="btn btn-primary btn-block btn-lg ladda-button" type="submit" data-style="zoom-in" id="registration">
Sign Up
</button>
</div>
$(document).on('click', '#registration', function(e) {
e.preventDefault();
swal({
title: 'Confirm',
input: 'checkbox',
inputValue: 0,
inputPlaceholder: 'Agree',
confirmButtonText: 'Continue',
confirmButtonColor: '#5d9cec',
showCancelButton: true,
cancelButtonColor: '#fffff',
reverseButtons: true,
inputValidator: function (result) {
return new Promise(function (resolve, reject) {
if (result) {
resolve();
} else {
reject('Do you agree?');
}
})
}
}).then(function (result) {
$('#form-registration').submit();
});
$.ladda('stopAll');
});