javascript - JQUERY AJAX 加载文本框焦点

Question

我试图获取 div 中的文本，以在 div 旁边的文本框聚焦时显示。我没有看到该文字

下面是jquery脚本

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <script src="../Scripts/jquery-1.11.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //$jquery selector
            //find textbox and place it in a variable
            var txtbox = $('input[type="text"]');

            //when textbox recives focus
            txtbox.focus(function () {
                $('#newroleHelpDiv').load('help.html');
            });

            //when textbox loses focus
            txtbox.blur(function () {
                $('#newroleHelpDiv').html('');
            });
        });
    </script>

下面是ASP代码

    <fieldset style="width:350px">
            <legend> New Role</legend>
             <table>
                 <tr>
                     <td>Insert New Role:</td>
                     <td> <input type="text" id="newrole" /> </td>
                     <td> <div id="newroleHelpDiv" runat="server"></div></td>
                     </tr>
                 </table>
        </fieldset>
</asp:Content>

下面是帮助文本来自的 help.html 文件

<div id="newroleHelpDiv">
    You may add an employee to this role
</div>

Answer 1

id 应该是唯一的，因此如果您有 id="newroleHelpDiv" 主 html，则应该为 help.html 使用另一个 id

不确定是否可以加载html文件，但如果只加载一次，那么您可以像这样显示和隐藏:

$(document).ready(function() {
  $('#newroleHelpDiv').load('help.html');
  $('#newroleHelpDiv').hide();
  //$jquery selector
  //find textbox and place it in a variable
  var txtbox = $('input[type="text"]');

  //when textbox recives focus
  txtbox.focus(function() {
    $('#newroleHelpDiv').show();
  });

  //when textbox loses focus
  txtbox.blur(function() {
    $('#newroleHelpDiv').hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<fieldset style="width:350px">
  <legend> New Role</legend>
  <table>
    <tr>
      <td>Insert New Role:</td>
      <td>
        <input type="text" id="newrole" /> </td>
      <td>
        <div id="newroleHelpDiv" runat="server">You may add an employee to this role</div>
      </td>
    </tr>
  </table>
</fieldset>