Question

我在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>

Answer 1

可能的问题可能是您在加载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 );      
    });
});

Answer 2

尝试通过属性选择器定位按钮，并使其等待，直到加载DOM。 $(document).ready()。

$(document).ready(function(){
    $('#btn-add[name="btn-add"]').click(function(){
        $(".content_wrapper").fadeOut( 400 );
        $(".loading" ).delay( 400 ).fadeIn( 400 );      
    });
});

Answer 3

您需要延迟表单提交时间足以显示您的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..
    } );
});

使用按钮单击执行的Jquery函数

3 个答案: