jQuery 不适用于 ng-repeat 结果 [英] jQuery not working with ng-repeat results

问题描述

我正在使用 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 = '移动';$scope.fetch = function() {$scope.code = null;$scope.response = null;$http({method: $scope.method, url: $scope.url + '&strategy=' + $scope.strategy, cache: $templateCache}).成功(功能(数据，状态){$scope.status = 状态；$scope.data = 数据；}).错误(功能(数据，状态){$scope.data = 数据 ||请求失败";$scope.status = 状态；});};$scope.updateModel = 函数(方法，网址){$scope.method = 方法；$scope.url = url;};}

HTML:

 
<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>
<div class="panel-collapse collapse"><div class="panel-body"><strong>影响分数</strong>:{{ruleResult.ruleImpact*10 |数量:0 |orderBy:ruleImpact}}

jQuery (在 ng-repeat 之外工作)

$('.panel-heading').on('click', function() {var $target = $(this).next('.panel-collapse');如果 ($target.hasClass('collapse')){$target.collapse('show');}别的{$target.collapse('隐藏');}});

感谢您的帮助！

解决方案

字面上的答案是因为这些处理程序是在运行时绑定的，因此 .panel-heading 不存在.您需要事件委托

$(".panel").on("click", ".panel-heading", function() {

现在，由于您使用的是 Angular，所有 DOM 操作都应该在指令中处理，而不是 jQuery！您应该重复 ng-click 处理程序或简单指令.

以及指令代码:

.directive("myCoolDirective", function() {返回 {限制:A"，链接:功能(范围，元素，属性){$(elem).click(function() {var target = $(elem).next(".panel-collapse");target.hasClass("collapse") ?target.collapse("show") : target.collapse("hide");});}}});

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.

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.

Test page: 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:

            <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)

$('.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!

解决方案

The literal answer is because those handlers are bound at runtime, therefore .panel-heading doesn't exist. You need event delegation

$(".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-click handler, or a simple directive.

<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");
            });
        }
    }
});

这篇关于jQuery 不适用于 ng-repeat 结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！