Question

我正在尝试使用bootstrap的加载状态更改（http://getbootstrap.com/javascript/#buttons-stateful）来点击时禁用按钮 - 以防止在客户端提交多个提交（在服务器端，我得到了覆盖）。这是我正在测试它的代码。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</head>
<body>

<form action = "http://slowLoadingPage/">
<button type = "button">This one works well</button>
<button type = "submit">Submit me!</button>
</form>

<script type = "text/javascript">
$(function () {
    $('body').on("click", "button", function(e) {
        $(this).button("loading");
    });
  });
</script>

</body>
</html>

它就像FF和Chrome中的魅力一样，但在Safari中，点击按钮会触发提交表单，但不会改变状态（添加了disabled类，但状态disabled不是）。

有什么方法可以在Safari中使用吗？

谢谢！

编辑1

决定改变JS一点，而不是观察点击事件，我添加了提交事件到表格（以便抓住其他方式提交表格）。代码现在看起来如下：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

</head>
<body>

<form action = "http://localhost/test.php">
<input type = "text" />
<button class = "btn btn-default" type = "submit">Submit me!</button>
</form>

<script type = "text/javascript">
$(function () {
    $("form:not([data-loading-state=disabled])").submit(function() {
        setTimeout($.proxy(function () {
            var inputs = $(this).find(":input");
            inputs.attr("data-form-disabled", 1);
            inputs.prop("disabled", true);
            inputs.addClass("disabled");
            $(this).find("button, input[type=submit]").each(function (i, el){
                func  = $(el).is('input') ? 'val' : 'html';
                $(el).attr("data-loading-text", $(el)[func]());
                $(el)[func]("Loading...");
            });
        }, this), 0);
    });
});
</script>

</body>
</html>

同样，它在FF和Chrome中完美运行（输入被禁用，点击按钮后按钮的文字也会发生变化）。 但是在Safari 中，它不能正常工作 - 输入是＆＃34;禁用＆＃34;但它们看起来不会被禁用，按钮的文字也不会改变。我尝试在jsfiddle上重新创建它，但是提交表单并不能很好地工作，所以我在自己的网站上创建了一个演示= http://demo.jacon.cz/test.html。单击FF和Chrome中的按钮后，按钮的文本将更改为loading...，并在3秒后，表单将被提交。在Safari中，它不起作用。

Safari＆amp; Twitter bootstrap＆amp;按钮的加载状态

0 个答案: