文件Click事件停止了过滤

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时才会触发，但它会应用于所有这些，即使在调用此位后添加的那些。