Javascript 事件需要在Jquery中多次单击

我试图从PHP脚本中获得响应，但在触发事件时，该按钮需要多次单击。我在谷歌上看到了这一点，但无法理解为什么会发生这种情况

Html代码

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

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>

Javascript代码

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

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>

函数MyResults（）{
$（文档）.ready（函数（）{
$（“#按钮1”）。单击（函数（）{
var searchData=$（“#search”）.val（）；
警报（搜索数据）；
$.ajax({
url:“http://localhost/test.php",
类型：“POST”，
async:true，
数据：{
“搜索”：searchDat，
},
成功：功能（价值）{
警报（JSON.parse（value））；
$.each（值，函数（索引，值1）{
console.log（value1）；
});
}   
});
});
});
}

问题在于，在提交表单之前，当前代码不会设置按钮的单击处理程序。第一次单击触发

上的

操作

属性，该属性设置处理程序。然后，第二次单击调用按钮处理程序

您可能希望使用如下HTML，而不是当前的代码：

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

您正在声明

$（document）.ready（function（）

在

MyResult

函数中。在第一种情况下，它将执行

MyFunction

，在第二种情况下，它将执行

ready

函数中的代码

实际上，这里不需要执行

操作

。下面的更改将起作用

HTML

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

---

这里两次触发一个事件

• 表单提交时首先触发
  action=“javascript:MyResults（）”

• 在函数部分中定义的表单提交后第二次激发
  $（“#按钮1”）。单击（函数（）{}）