ボタンクリックで実行するJquery関数

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がロードされるまでそれを待たせます。 $(document).ready()。

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

Answer 2

可能性の問題はあなたが前にあなたのクリックハンドラをバインドしようとしていることが考えられ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 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.. 
    }); 
});