Question

我的代码

的index.php

<!DOCTYPE html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
  $("#verifica").click(function(){
  $("#risultati").html("Please wait...");
    $.ajax({
      type: "POST",
      url: "go.php",
      data: $("#ciao").serialize(),
      dataType: "html",
      success: function(msg)
      {
        $("#risultati").html(msg);
      },
      error: function()
      {
          $("#risultati").html("An error occurred.");
      }
    });
  });
});
</script>
<form name="ciao" id="ciao" action="#">
<input type="text" id="zio" name="zio">
<input type="submit" onclick="return:false;" name="verifica" id="verifica" value="go">
</form>
<div id="risultati"></div>
</body>

go.php

<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<script>
$("#zio").focus();
</script>
</body>

应该做什么

当表单通过jquery完全提交给go.php时，将#zio聚焦。

什么不起作用

在提交表单数据时，＃zio没有聚焦。

我的问题

如何修复我的代码？

Answer 1

由于您的Ajax代码知道所有输入（同一页面），为什么不这样做：

  success: function(msg)
  {
      $("#risultati").html(msg);
      $("#zio").focus();
  },

您当前的版本有一个子页面，知道父页面（分离不良）。

Answer 2

完成处理POST数据后，您无需在go.php中显示html代码

试试这个

$(document).ready(function() {
  $("#verifica").click(function(){
  $("#risultati").html("Please wait...");
    $.ajax({
      type: "POST",
      url: "go.php",
      data: $("#ciao").serialize(),
      //dataType: "html",
      success: function(msg)
      {
        $("#risultati").html(msg);
        $("#zio").focus();
      },
      error: function()
      {
          $("#risultati").html("An error occurred.");
      }
    });
  });
});

Answer 3

附加解决方案有同样的问题，无论我尝试什么，焦点（）似乎都无法发挥作用。

最终证明所需要的是滚动到正确的位置：

jquery焦点不在加载ajax的页面上工作

我的代码

应该做什么

什么不起作用

我的问题

3 个答案: