我添加 jquery.blockUI.js到我的 html 页面，我在脚本中使用了它。我的 HTML 页面是:
<form class="form-horizontal" role="form" id="form" method="POST" >
<button type="submit" class="btn btn-default btn_red" id="btnSubmit">Submit</button>
</form>
{% block customjs %}
<script src="js/jquery.blockUI.js"></script>
<script type="text/javascript">
$(document).ajaxStop($.unblockUI);
$(document).ready(function() {
$("#form").submit(function(){$.blockUI({ message: '<h4><img src="/image/gears.gif" />Please wait...</h4>' });
});
</script>
{% endblock %}
这在 Firefox 50.1.0 版本中不起作用。当我将它用于提交 block 时，它将不起作用。我在按钮中尝试了 onclick 方法。
<button type="submit" class="btn btn-default btn_red" id="btnSubmit" onclick="testing()">Submit</button>
<script>
function testing() {
$.blockUI({ message: '<h4><img src="/image/gears.gif" />Please wait...</h4>' });
}
</script>
它没有用。最后我也尝试了这个，
$("#btnSubmit").click(function(){$.blockUI({ message: '<h4><img src="/image/gears.gif" />Please wait...</h4>' });
});
这在 Firefox 中也不起作用。但在 Chrome 中工作。所以请给我一个如何在 firefox 上运行它的解决方案。我正在创建一个 python django 项目，如果不完成这个项目我就无法继续我的项目。
谢谢
最佳答案
您的第一个代码片段似乎有错误，它缺少 document.ready() 的结尾。您是否也尝试过防止表单提交默认。
我已经使用 preventDefault() 对此进行了测试，似乎可以在 firefox 和 chrome 上使用。如果没有 preventDefault()，提交后控制台应该会出现错误。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<form class="form-horizontal" role="form" id="form" method="POST" >
<button type="submit" class="btn btn-default btn_red" id="btnSubmit">Submit</button>
</form>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="http://malsup.github.io/jquery.blockUI.js"></script>
<script type="text/javascript">
$(document).ajaxStop($.unblockUI);
$(document).ready(function(){
$("#form").submit(function(e){
e.preventDefault();
$.blockUI({ message: '<h4><img src="/image/gears.gif" />Please wait...</h4>' });
})
})
</script>
</body>
</html>关于提交表单时，javascript blockUI 在 firefox 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41856691/