文档点击事件在过滤器上停止

Question

我有一个在文档加载时调用的事件，以使其能够单击具有类“标题”的每个元素以展开并显示更多详细信息：

$(document).ready(function () {
    InitClick();
});

函数如下：

function InitClick() {
    $('.header').click(function () {
        $(this).nextUntil('tr.header').slideToggle();
    });
}

现在的问题是当结果被过滤时，它会导致点击事件停止，直到我重新初始化它，然后它会再次开始工作......直到数据再次被过滤或必须更新。

现在我的主要问题是，有没有人有一个可以帮助我的东西的链接，我试过把它放在 $watch 上，但我一直遇到的主要问题是在过滤数据返回之前调用它，导致它在数据存在之前初始化。

如果有帮助，这里是 MyApp.js？

var MyApp = angular.module('MyApp', []);

MyApp.controller('MyAppCtrl', function ($scope, $filter) {
    $scope.Users = tJSONData;
    $scope.currentPage = 0;
    $scope.pageSize = 3;
    $scope.Pages = [];

    $scope.search = '';
    $scope.Completed = '';


    $scope.getData = function () {
    return $filter('filter')($scope.Users, $scope.search ||     $scope.Completed);
    }

    $scope.numberOfPages = function () {
        return Math.ceil($scope.getData().length / $scope.pageSize);
    }

    $scope.$watch('numberOfPages()', function (newVal, oldVal) {
        var tPages = [];
        for (i = 0; i < $scope.numberOfPages(); i++) {
            tPages.push(i + 1);
        }

        if ($scope.currentPage >= $scope.numberOfPages()) {
            $scope.currentPage = $scope.numberOfPages() - 1;
        }

        if ($scope.currentPage == -1) {
            $scope.currentPage = 0;
        }
        return $scope.Pages = tPages;
    })

    $scope.updatePage = function () {
        $scope.$apply(function () {
            $scope.Users = tJSONData
        })
    }

    $scope.limitPagination = function () {
        if ($scope.currentPage == 0) {
            return $scope.currentPage;
        } else if ($scope.currentPage == 1) {
            return $scope.currentPage - 1
        } else {
            return $scope.currentPage - 2;
        }
    }
});

MyApp.filter('startFrom', function () {
    return function (input, start) {
        start =+ start; //parse to int
        return input.slice(start);
    }
});

任何帮助表示赞赏:)

Answer 1

简而言之，当您调用$(selector).click（或任何其他事件）时，它只会为调用时抓取的元素设置事件。如果元素被删除和替换（似乎是你的情况），新元素不会自动拥有它。

不要使用$(selector).click(callback)，而是使用$(document).on('click', selector, callback)

在您的情况下，看起来应该可以解决问题：

$(document).on('click', '.header', function () {
    $(this).nextUntil('tr.header').slideToggle();
});

不同的是，这种方式，事件实际上是绑定到document本身，它永远不会改变。然后您进行过滤，使其仅在您单击 .header 时触发，但它会应用于所有这些，即使是在调用此位之后添加的那些。