AJAX按钮点击异常：首次无响应，后续弹窗次数递增

问题原因 #

• 你的代码把jQuery的click事件绑定逻辑放在了btn1Click函数中，而这个函数通过按钮的onclick属性触发。
• 首次点击按钮时，仅完成了#btn1的点击事件绑定，并未执行AJAX请求，所以无反应。
• 第二次点击时，btn1Click会再次给#btn1绑定一次点击事件，此时按钮已有两个绑定的回调，因此执行两次AJAX请求，弹窗两次。
• 后续每次点击都会新增一次事件绑定，导致弹窗次数逐次递增。

修正方案 #

方案一：移除onclick属性，用jQuery直接绑定事件（推荐） #

这种方式只会绑定一次点击事件，从根源避免重复绑定问题：

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("#btn1").click(function(){
                    // 获取按钮文本内容
                    var num = $(this).text();
                    $.post("index.php",
                        {
                            num: num
                        },
                        function(data, status){
                            alert(status);
                            $("#test").html(data);
                        });
                });
            });
        </script>
    </head>
    <body>
        <div id="test">
            <p>This is the first content!</p>
        </div>
        <button id="btn1">Click to change</button>
        <button id="btn2">2 change</button>
    </body>
</html>

方案二：保留onclick属性，直接在触发函数中执行AJAX #

去掉函数内的事件绑定逻辑，直接发起请求：

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>
            var btn1Click = function(num){
                $.post("index.php",
                    {
                        num: num
                    },
                    function(data, status){
                        alert(status);
                        $("#test").html(data);
                    });
            };
        </script>
    </head>
    <body>
        <div id="test">
            <p>This is the first content!</p>
        </div>
        <button id="btn1" onclick="btn1Click(this.textContent)">Click to change</button>
        <button id="btn2">2 change</button>
    </body>
</html>

优化PHP代码（避免未传参报错） #

增加参数存在性判断，防止$_POST["num"]未定义导致的错误：

<?php
if(isset($_POST["num"])){
    echo "<p>{$_POST["num"]}</p>";
    echo "<input type=\"checkbox\" id=\"chk\">Wybierz";
}
?>

内容的提问来源于stack exchange，提问作者Jakub Żeżuła