jQuery 不选择具有动态 ID 的元素，如何做到这一点？
Posted
技术标签:
【中文标题】jQuery 不选择具有动态 ID 的元素，如何做到这一点？【英文标题】：jQuery doesn't select the element with dynamic ID, how to do that? 【发布时间】：2018-05-03 16:09:46 【问题描述】：当我通过指令传递 ID 时遇到问题。我无法在 Link 函数中使用 jQuery 获取元素，并且该元素使用正确的动态 ID 作为参数：
指令：
(function(angular)
var app = angular.module('pi.core');
app.directive('piSearch', function()
return
restrict: 'E',
transclude: true,
replace: true,
scope:
idelement: '@'
,
link: function(scope, element, attrs, controller, transcludeFn)
var idelement = scope.idelement;
console.log('idElement: ' + idelement);
console.log($('#' + idelement + ' .typeahead'));
,
template: '<div id="idelement"></div>'
;
);
)(angular);
var myApp = angular.module('piCore', []);
myApp.directive("piSearch", function()
return
restrict: 'E',
transclude: true,
replace: true,
scope:
idelement: '@'
,
link: function(scope, element, attrs, controller, transcludeFn)
var idelement = scope.idelement;
scope.elementSelected = $('#' + idelement + ' .typeahead');
console.log('idElement: ' + idelement);
console.log($('#' + idelement + ' .typeahead'));
,
template: '<div id="idelement"></div>'
;
);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body ng-app="piCore">
<pi-search></pi-search>
$scope.elementSelected
</body>有什么提示吗？提前感谢您的帮助！
【问题讨论】：
您的 sn-p 不是可运行。请更新它以使其运行并演示问题（或仅使用代码块）。更多关于做shippets here. 另外：我怀疑值得回顾“Thinking in AngularJS” if I have a jQuery background? T.J.谢谢解决这个紧急情况后我会仔细阅读那篇文章 【参考方案1】：我会重构你的链接函数，记住 Angular 有自己的生命周期，你需要确保你的模板在你的模型有值时编译，将你的逻辑包装在一个手表中
app.directive('piSearch', function()
return
restrict: 'E',
transclude: true,
replace: true,
scope:
idelement: '@'
,
link: function(scope, element, attrs, controller, transcludeFn)
var idelement = scope.idelement;
scope.$watch('idelement',function()
scope.elementSelected = $('#' + idelement + ' .typeahead');
console.log('idElement: ' + idelement);
console.log($('#' + idelement + ' .typeahead'));
);
,
template: '<div id="idelement"></div>'
;
);
【讨论】：
感谢 Jorge，现在尝试...但是 scope（不带 $）会出错，因为 scope.watch 不是函数，我应该转到控制器吗？？ 嗨，我犯了一个错误，检查更新是'scope.$watch'，我强烈建议将此逻辑保留在指令$watchdocs.angularjs.org/api/ng/type/$rootScope.Scope#$watch【参考方案2】：
尝试使用angular.element("#"+ idelement);
还要确保template: '<div id="idelement"></div>' 不会多次生成
【讨论】：
我在我的页面中多次使用我的指令，传递 id 因为我需要为特定元素分配一些样式...看起来 angular.element 不起作用（选择所有页面和长度都不存在） 为什么要为实现样式创建指令，您可以使用 ng-class="'class name':CONDITION" 轻松处理 因为它是一个指令，它处理带有额外优化的 twitter typeahead 插件......我现在无法在 ng-class 上添加一些东西，但我会检查我是否能够在未来……【参考方案3】：关于动态 ID 和全局元素你必须知道的一件事：
1) 首先您必须在 javascript 中生成动态 html
2) 打印、追加或插入 DOM 中的某处
3) 现在要访问该新元素，您必须使用document 来读取该新元素，如下所示：
document.getElementById('new-generic-id');
或
$(document).on('click touchstart select', '#new-generic-id', function());
希望你能理解。
【讨论】：
谢谢伊维扬。 1）我是否已经通过指令中的模板进行操作了？ 2) 与 1 相同 3) 在 Link 中（正确的位置？）使用 document.getElementById （变量名）查询我得到 null .... 有没有办法，即使不是优雅的临时解决方法来做一些事情？我在一页中多次使用该指令，所以这就是为什么我需要有不同的 id... 顺便说一句，我在 $(document).ready(function() 之后做 document.getElementById以上是关于jQuery 不选择具有动态 ID 的元素，如何做到这一点？的主要内容，如果未能解决你的问题，请参考以下文章
JQuery 选择器：如何选择具有特定类 * 和 * id 的项目