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-transclude
或
directives
来做到这一点,请告诉我们。
问候
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