JQUERY AJAX LOAD-TEXTBOX FOCUS

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>