当文本框被点击时如何使按钮获得焦点

Question

我有一个文本框，当用户单击其中时，它应该聚焦在一个按钮上。我不需要使用回车键，我只想在用户单击文本框时聚焦在按钮上。

$("#txtBox").click(function() {

  alert("The textbox is clicked."); //added for testing purposes it doesnt get hit.
  $("#button").focus();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group col-sm-2">
  <label for="txtBox" class="sr-only">Text</label>
  <input type="text" class="form-control" id="txtBox" name="txtBox"></div>
<div class="form-group col-sm-1">
  <label for="button" class="sr-only">submit</label>
  <button type="button" class="btn btn-default" id="button" name="button">Focus Me</button></div>

问题在于我的HTML存储在SQL脚本中，所以它无法检测到txtBox。

- Sarah

---

所以你是通过AJAX或其他方式动态获取HTML吗？ - bipen

我尝试了你的代码，它按预期运行。当点击文本框时，它会显示警报，然后单击“确定”按钮，它会将焦点更改为按钮。 - Madhavan.V

你的代码运行良好。请查看更新。 - Pedram

HTML 存储在 SQL 中，因此使用 AJAX 调用它。 - Sarah

这不重要... HTML 和 JS 在客户端浏览器中运行。 - Philipp Sander

Answer 1

根据评论，您通过ajax加载html，将html附加到DOM之后，因此需要使用(bind)函数的实时版本。您可以像这样使用.on：

$("#txtBox").on('click',function() {

  alert("The textbox is clicked."); //added for testing purposes it doesnt get hit.
  $("#button").focus();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group col-sm-2">
  <label for="txtBox" class="sr-only">Text</label>
  <input type="text" class="form-control" id="txtBox" name="txtBox"></div>
<div class="form-group col-sm-1">
  <label for="button" class="sr-only">submit</label>
  <button type="button" class="btn btn-default" id="button" name="button">Focus Me</button></div>

Or

$(document).on('click','#txtBox',function() {

  alert("The textbox is clicked."); //added for testing purposes it doesnt get hit.
  $("#button").focus();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group col-sm-2">
  <label for="txtBox" class="sr-only">Text</label>
  <input type="text" class="form-control" id="txtBox" name="txtBox"></div>
<div class="form-group col-sm-1">
  <label for="button" class="sr-only">submit</label>
  <button type="button" class="btn btn-default" id="button" name="button">Focus Me</button></div>

- Pedram