javascript - 事件需要在Jquery中多次单击

我正在尝试从PHP脚本获得响应，但是该按钮在触发事件时需要多次单击。我在Google上阅读过有关此内容的信息，但无法理解它为什么会发生。

HTML代码

<form action="javascript:MyResults()">
     <input type="submit" value="Search" id ="button1"/>
</form>

JavaScript代码

function MyResults(){
    $(document).ready(function(){
        $("#button1").click(function(){
            var searchData = $("#search").val();
            alert(searchData);
            $.ajax({
                url: "http://localhost/test.php",
                type:"POST",
                async:true,
                data:{
                    "search" : searchDat,
                },
                success: function(value){
                    alert( JSON.parse(value));
                    $.each(value, function(index, value1){
                            console.log(value1);
                    });
                }
            });
        });
    });
}
</script>

最佳答案

问题在于您的当前代码在提交表单之前不会设置按钮的单击处理程序。第一次单击将触发action上的<form>属性，从而设置处理程序。第二次单击然后调用按钮处理程序。

您可能需要这样的HTML，而不是当前的代码：

<form>
     <input type="submit" value="Search" id ="button1"/>
</form>

使用不带包装器$(document).ready(...)的function MyResults()，并确保取消click事件以停止传统表单提交：

<script>
$(document).ready(function(){
    $("#button1").click(function(event){
        event.preventDefault();
        event.stopPropagation();
        var searchData = $("#search").val();
        alert(searchData);
        $.ajax({
            url: "http://localhost/test.php",
            type:"POST",
            async:true,
            data:{
                "search" : searchDat,
            },
            success: function(value){
                alert( JSON.parse(value));
                $.each(value, function(index, value1){
                        console.log(value1);
                });
            }
        });
    });
});
</script>