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

Question

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>

Answer 1

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