Ladda Button无法在Safari中使用

时间:2017-11-02 14:44:33

标签: jquery ladda

撕掉我的头发。

这是我的按钮

<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(),则微调器不会显示;并且旋转器也没有完全位于按钮的中心位置。

此时秃顶......

更新2

如果我有一些干扰正常提交流程的东西,它确实有效。

在我的注册页面中,我有一个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>

javascript

$(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');
});

0 个答案:

没有答案