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

I'm having this problem with Jquery where it does not execute the function after button click.

What I am trying to accomplish is to show a loading modal when the user clicks the form submit button, and then it goes away after the page has been loaded.

It shows the loading modal on page loading...but nothing executes on the button click.

HTML Form Button:

<button type="submit" name="btn-add" id="btn-add">Add Line</button>

PHP Code:

//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>

Try targeting the button through a attribute selector and make it wait until the DOM is loaded. $(document).ready().

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

A possible problem could be that you are trying to bind your click handler before the DOM is loaded / the #btn-add element is on the page.

If the javascript you are showing is located in the head of the html, this would be the problem.

To avoid that, you should bind your click handler when the DOM is loaded:

// Execute this when the DOM is ready
$(document).ready(function() {
    $('#btn-add').click(function() {
        $(".content_wrapper").fadeOut( 400 );
        $(".loading" ).delay( 400 ).fadeIn( 400 );      
    });
});

You will need to delay the form submission long enough to show your div. Instead of listening for the click on the button listen for the form submission..

<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..
    } );
});