javascript - Jquery中的事件需要多次点击

Question

我试图从 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>

Answer 1

您正在 MyResult 函数中声明 $(document).ready(function() 。在第一种情况下，它将执行 MyFunction &在第二种情况下，它将执行 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);
        });
      }
    });
  });

})