开发者问题收集

jquery focus 在 ajax 加载内容中不起作用

2015-03-26
3267

我试图将焦点设置在使用 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>

我得到的错误

Uncaught RangeError:超出最大调用堆栈大小

我尝试的替代方案

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

AND

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

但是它对我不起作用。

3个回答
  • @Shaggy 为什么使用 Ajax 来获取模板?如果您 手动注入 HTML 而不使用 Angular,则可能会出现 $apply$digest 循环,并且数据绑定不正确。

    使用 AngularJS,您应该执行以下操作:

    • 使用 ng-include 在需要时添加模板。( 也可以使用 ng-transclude

    • 创建一个属性 directive 来接收焦点

此示例 中,当您按下按钮时会添加模板

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

并在您的模板

<input get-focus="true"/>

希望这对您有所帮助。如果您想使用 ng-transcludedirectives 来做到这一点,请告诉我们。

问候

Matias Fernandez Martinez
2015-04-03

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

$('#formId').find('#inputId').focus();
Ebrahim Golkhani
2015-04-09

为您的输入提供一个 id,然后尝试这个

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

这应该可行。

Mairaj Ahmad
2015-04-08