Question

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

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>

Answer 1

您在$(document).ready(function()函数内声明MyResult。在第一种情况下，它将执行MyFunction＆amp;在第二种情况下，它将执行ready函数内的代码。

实际上这里不需要action。以下更改将起作用

<强> HTML

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

<强> JS

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

})

Answer 2

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

您可能需要这样的HTML代替当前代码：

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

在没有包装器$(document).ready(...)的情况下使用function MyResults()，并确保取消点击事件以停止传统表单提交：

<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>

Answer 3

这里两次发射了一个事件。

表单提交时首先触发。

行动= “JavaScript的：MyResults（）”
在功能部件中定义的表单提交后第二次触发。
。
$（ “＃按钮1”）点击（函数（）{}）;

事件需要在Jquery中多次单击

3 个答案: