Question

我正在尝试将重点放在使用ajax .load方法生成的元素上。

DesignHome.aspx

<!-- All Jquery Scripts Go Here -->
<script src="../../Scripts/angular.min.js?v=7" type="text/javascript"></script>
<script type="text/javascript">
    var app = angular.module("module", []);
</script>
<script src="../../Scripts/DataFactory/DataFactory.js?v=7" type="text/javascript"></script>
<script src="../../Scripts/Controller/RegistrationController.js?v=7" type="text/javascript"></script>

<div id="divPopupRegistration" class="RegistrationPopup hide" style="overflow: hidden;
    z-index: 999" ng-app="module">  
    <div id="divFullRegistration" class="Full hide">
    </div>
</div>

<script type="text/javascript">
    function partialRegistrationForm() {
        $('#divFullRegistration').load('../RegistrationPages/PartialRegistration.htm', function (data) {
            $('input[name=firstname]').focus();
        });
    }
</script>

PartialRegistration.htm

<!-- Again i have to load this, if i wont then it will not work. Reason unknown -->
<script type="text/javascript" src="../../Scripts/angular.min.js?v=7.0.0"></script>

<body ng-cloak>
    <div ng-controller="partialcontroller" id="parentDiv" ng-init="init()">
        <div class="registrationBg" runat="server" id="PartialRegistration">
            <div class="regcontent">
                <ul class="bxslider">
                    <li id="liContact">
                        <form name="formContactInfoPartial" novalidate>
                        <div class="popupContent" id="ContactInfo">
                            <div class="left column1">
                                <div class="lable">
                                    First Name<span>*</span></div>
                                <input type="text" class="textbox shareinput" ng-model="UserDetails.firstName" name="firstname"
                                    onkeypress="return isAlphabet(event);" ng-required="true" tabindex="0" maxlength="20"
                                    ng-class="{'has-error': submitted && formContactInfoPartial.firstname.$invalid}" />
                            </div>

<!-- Then all remaining markup and closing tags -->

<script>
    // My focus code breaks here !
</script>

我得到的错误

未捕获RangeError：超出最大调用堆栈大小

我尝试作为替代

$('input[name="firstname"]').on("focus", function () { });

和

setTimeout(function () { $('input[name="firstname"]').focus(); }, 500);

但它对我不起作用。

Answer 1

@Shaggy为什么使用Ajax获取模板？如果你在不使用Angular的情况下手动注入HTML，您将面临循环风险正确地$apply和$digest并且数据绑定。

使用AngularJS你应该做的是：
- 使用ng-include可在需要时添加模板。（也可以使用ng-transclude ）
- 创建属性directive以获得焦点

在this example中，按下按钮时会添加模板

  <div id="divFullRegistration" ng-include="partialTemplate" class="Full hide"></div>

在模板上添加get-focus指令

<input get-focus="true"/>

我希望这会对你有所帮助。如果您想使用ng-transclude或directives，请告诉我们。

此致

Answer 2

为您提供输入和表单ID，然后运行此代码

$('#formId').find('#inputId').focus();

Answer 3

为您的输入提供ID而不是尝试此

<input type="text" class="textbox shareinput" id="firstName" / >
$('input[id$=firstName]').foucs();

这应该有用。

Answer 4

$( document ).ready(function() {
    $('input[name=firstname]').focus();
});

完整示例

<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$( document ).ready(function() {
    $('input[name=firstname]').focus();
});
</script>
</head>
<body>
<input type="text" name="firstname" />
</body>
</html>

https://api.jquery.com/focus/

Answer 5

试试这个

$(function(){
  $('#target').load('load.html', function(){
    $('input[name="name"]', $('#target')).focus();
  });
})

http://plnkr.co/edit/6zaymsYyIHtOs6LxZRw2

Answer 6

您也可以使用html5设置焦点

<input type="text" class="textbox shareinput" ng-model="UserDetails.firstName" name="firstname" autofocus>

jquery焦点在ajax加载的内容中不起作用

6 个答案: