javascript jQuery 不适用于 ng-repeat 结果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20482047/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery not working with ng-repeat results
提问by Joe Conlin
I am using ng-repeat to build an accordion using jQuery and TB. For some reason, this is working perfectly when hardcoded but fails to trigger on click when inside of the ng-repeat directive.
我正在使用 ng-repeat 使用 jQuery 和 TB 构建手风琴。出于某种原因，这在硬编码时运行良好，但在 ng-repeat 指令内部时无法触发点击。
I was thinking that the issue is from jQuery not binding elements loaded in after the fact. So, I figured that instead of loading the script on page load, it would be better to load the function on .success when the data is returned. Unfortunately, I cannot figure out how to make this work.
我在想问题出在 jQuery 未绑定事后加载的元素上。因此，我认为与其在页面加载时加载脚本，不如在返回数据时在 .success 上加载函数。不幸的是，我无法弄清楚如何进行这项工作。
Test page: http://staging.converge.io/test-json
测试页面：http: //staging.converge.io/test-json
Controller:
控制器：
function FetchCtrl($scope, $http, $templateCache) {
$scope.method = 'GET';
$scope.url = 'https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=http://www.web.com&key=AIzaSyA5_ykqZChHFiUEc6ztklj9z8i6V6g3rdc';
$scope.key = 'AIzaSyA5_ykqZChHFiUEc6ztklj9z8i6V6g3rdc';
$scope.strategy = 'mobile';
$scope.fetch = function() {
$scope.code = null;
$scope.response = null;
$http({method: $scope.method, url: $scope.url + '&strategy=' + $scope.strategy, cache: $templateCache}).
success(function(data, status) {
$scope.status = status;
$scope.data = data;
}).
error(function(data, status) {
$scope.data = data || "Request failed";
$scope.status = status;
});
};
$scope.updateModel = function(method, url) {
$scope.method = method;
$scope.url = url;
};
}
HTML:
HTML:
<div class="panel-group" id="testAcc">
<div class="panel panel-default" ng-repeat="ruleResult in data.formattedResults.ruleResults">
<div class="panel-heading" toggle-collapse>
<h4 class="panel-title">
<a data-toggle="collapse-next" href="">
{{ruleResult.localizedRuleName}}
</a>
</h4>
</div>
<div class="panel-collapse collapse">
<div class="panel-body">
<strong>Impact score</strong>: {{ruleResult.ruleImpact*10 | number:0 | orderBy:ruleImpact}}
</div>
</div>
</div>
</div>
jQuery(works outside of ng-repeat)
jQuery （在 ng-repeat 之外工作）
$('.panel-heading').on('click', function() {
var $target = $(this).next('.panel-collapse');
if ($target.hasClass('collapse'))
{
$target.collapse('show');
}else{
$target.collapse('hide');
}
});
Thanks for any help!
谢谢你的帮助！
回答by tymeJV
The literal answer is because those handlers are bound at runtime, therefore .panel-headingdoesn't exist. You need event delegation
字面的答案是因为这些处理程序在运行时绑定，因此.panel-heading不存在。你需要事件委托
$(".panel").on("click", ".panel-heading", function() {
Now, since you're using Angular, all DOM manipulation should be handled within a directive, not jQuery! You should be repeating either an ng-clickhandler, or a simple directive.
现在，由于您使用的是 Angular，所有 DOM 操作都应该在指令中处理，而不是 jQuery！您应该重复ng-click处理程序或简单指令。
<div class="panel-heading" toggle-collapse my-cool-directive>
And the directive code:
和指令代码：
.directive("myCoolDirective", function() {
return {
restrict: "A",
link: function(scope, elem, attrs) {
$(elem).click(function() {
var target = $(elem).next(".panel-collapse");
target.hasClass("collapse") ? target.collapse("show") : target.collapse("hide");
});
}
}
});
回答by Sreekanth Karini
When we use ng-repeat and need to trigger a jquery click event just try this it worked for me.
当我们使用 ng-repeat 并且需要触发 jquery click 事件时，试试这个它对我有用。
$(document).on("click", ".className", function() {
//your code here...
});
回答by ahmadalibaloch
You can run a jquery or any other javascript code after the angular finishes its rendering. For details see this answer : https://stackoverflow.com/a/20421291/2002079
在 angular 完成渲染后，您可以运行 jquery 或任何其他 javascript 代码。有关详细信息，请参阅此答案：https: //stackoverflow.com/a/20421291/2002079
