最初のクリックでこのアラートが表示されないのはなぜですか？

Question

ボタンを作成しました。ボタンをクリックすると、PHPファイルを実行してアラートを表示します。ここで私がしようとしているものです： HTML：

<button id="testid" style="height:20px; width: 50px; cursor: pointer" onclick="logoutfunc()">Logout</button> 

はJavaScript：

function logoutfunc() { 
    $(document).ready(function() { 
     $("#testid").click(function() { 
      $.ajax({ 
       url: 'logoutt.php', 
       type: 'post', 
       success: function(result11) { 
        //$(location).attr('href', 'login.php'); 
        alert(result11); 
       }, 
       error: function() { 
        alert("no"); 
       } 
      }); 
     }); 
    }); 
} 

logoutt.php

<?php 
$a="Hello"; 
echo $a; 
?> 

今の問題は、私はボタンをクリックしたときにということです初めて警告を表示しません。しかし、もう一度クリックすると、同じアラートが2回表示されます。それをもう一度クリックすると、3回の警告などが表示されます。何が私が書いた間違い？

Answer 1

インラインイベントハンドラ内でクリックハンドラをバインドしています。したがって、ボタンを最初にクリックしたときにイベントハンドラがアタッチされます。それで、それは2回目です。

インラインクリックハンドラを削除します。 jQueryを使用してイベントハンドラをバインドするだけです

$(document).ready(function() { 
    $("#testid").click(function() { 
     $.ajax({ 
      url: 'logoutt.php', 
      type: 'post', 
      success: function(result11) { 
       //$(location).attr('href', 'login.php'); 
       alert(result11); 
      }, 
      error: function() { 
       alert("no"); 
      } 
     }); 
    }); 
}); 

Answer 2

なぜ同じイベントを繰り返しバインドしていますか？

....onclick="logoutfunc()"... 

あなたHTMLからこの部分を削除し、あなたのJavaScriptで文書準備ハンドラを取り囲ん機能を削除します。

$(document).ready(function(){ 
    $("#testid").click(function(){ 
    // your ajax code. 
    });  
});