我试图将焦点集中在使用 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>
部分注册.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>
我得到的错误
未捕获的范围错误:超出最大调用堆栈大小
我尝试作为替代方案
$('input[name="firstname"]').on("focus", function () { });
并且
setTimeout(function () { $('input[name="firstname"]').focus(); }, 500);
但这对我不起作用。
最佳答案
@Shaggy 为什么使用 Ajax 来获取模板？如果你 在不使用 Angular 的情况下手动注入(inject) HTML，您将面临循环的风险 正确设置
$apply和$digest并进行数据绑定(bind)。使用 AngularJS 你应该做的是:
在需要时使用
ng-include添加模板。(也可以使用ng-transclude)创建属性
指令来接收焦点
在 this example按下按钮时会添加模板
<div id="divFullRegistration" ng-include="partialTemplate" class="Full hide"></div>
并在模板上添加 get-focus 指令
<input get-focus="true"/>
希望这对您有帮助。如果您想使用 ng-transclude 或 directives 来完成此操作，请告诉我们。
问候
关于jquery 焦点在 ajax 加载的内容中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29283244/