我在Jquery遇到这个问题时,按钮点击后它没有执行该功能。
我想要完成的是在用户点击表单提交按钮时显示加载模式,然后在页面加载后它就消失了。
它显示页面加载时的加载模式...但按钮单击时没有执行任何操作。
HTML表单按钮:
<button type="submit" name="btn-add" id="btn-add">Add Line</button>
PHP代码:
//Add Button
if(isset($_POST['btn-add']))
{
//PHP Code (Works Fine)
}
JQuery的:
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
$(".loading").fadeOut( 400 );
$(".content_wrapper" ).delay( 400 ).fadeIn( 400 );
});
$('#btn-add').click(function() {
$(".content_wrapper").fadeOut( 400 );
$(".loading" ).delay( 400 ).fadeIn( 400 );
});
</script>
答案 0 :(得分:0)
可能的问题可能是您在加载DOM之前尝试绑定点击处理程序/页面上有#btn-add
元素。
如果你显示的javascript位于html的头部,这就是问题所在。
为避免这种情况,您应该在加载DOM时绑定您的单击处理程序:
// Execute this when the DOM is ready
$(document).ready(function() {
$('#btn-add').click(function() {
$(".content_wrapper").fadeOut( 400 );
$(".loading" ).delay( 400 ).fadeIn( 400 );
});
});
答案 1 :(得分:0)
尝试通过属性选择器定位按钮,并使其等待,直到加载DOM。 $(document).ready()
。
$(document).ready(function(){
$('#btn-add[name="btn-add"]').click(function(){
$(".content_wrapper").fadeOut( 400 );
$(".loading" ).delay( 400 ).fadeIn( 400 );
});
});
答案 2 :(得分:0)
您需要延迟表单提交时间足以显示您的div。而不是听取按钮上的点击,听取表单提交..
<form id='myform'>...</form>
$("#myform").submit(function(e){
var form = this;
e.preventDefault(); // prevent submission
$(this).off('submit'); // remove handler to prevent recursion
$(".loading").delay( 400 ).fadeIn( 400, function(){ // add callback to submit the form in
$(form).submit(); // submit the forrm for real..
} );
});