我正在使用ng-repeat使用jQuery和TB构建手风琴。出于某种原因,这在进行硬编码时可以很好地工作,但是在ng-repeat指令内部时无法触发点击。
我以为问题出在jQuery,而不是事实之后绑定的元素。因此,我认为与其在页面加载时加载脚本,不如在返回数据时在.success上加载函数会更好。不幸的是,我不知道该如何做。
测试页 :http : //staging.converge.io/test-json
控制器 :
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 :
<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 (在ng-repeat之外运行)
$('.panel-heading').on('click', function() { var $target = $(this).next('.panel-collapse'); if ($target.hasClass('collapse')) { $target.collapse('show'); }else{ $target.collapse('hide'); } });
谢谢你的帮助!
字面上的答案是因为这些处理程序是在运行时绑定的,因此.panel-heading不存在。您需要 事件委托
.panel-heading
$(".panel").on("click", ".panel-heading", function() {
现在,由于您使用的是Angular,所有DOM操作都应在指令而不是jQuery中处理!您应该重复一个ng-click处理程序或一个简单的指令。
ng-click
<div class="panel-heading" toggle-collapse my-cool-directive>
和指令代码:
.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"); }); } } });