带有jQuery事件的AngularJS过滤器不起作用答案

【问题标题】：AngularJS filter with jQuery event not working带有jQuery事件的AngularJS过滤器不起作用
【发布时间】：2015-10-02 19:31:06
【问题描述】：

我有一个来自$scope 的项目列表，我将 jQuery 事件与它们绑定，并使用输入字段来过滤列表。一切正常。

当我在输入字段中输入内容时，过滤掉的项目仍然会与 jQuery 事件绑定；但是，如果我从输入字段中删除文本，重新出现的项目似乎超出了范围。

您可以查看this plunker。当我点击列表中的按钮时，会弹出一个警告，但是如果我在输入框中输入b，然后删除它，点击带有文本a的按钮将不会弹出。

我该如何解决这个问题？

提前致谢。

更新：

感谢您的回答，很抱歉用这样一个简单的例子误导了您：/实际情况有很大不同。无论如何，在这里使用jQuery .on 不是一个好主意，我应该做的是将$event 对象传递给范围内的函数，并处理该函数内的DOM元素。

【问题讨论】：

标签： javascript jquery angularjs angularjs-filter

【解决方案1】：

问题在于角度过滤器，您应该清楚它的功能过滤器只是不会从 DOM 中隐藏元素，而是在事件第一次附加到元素时从 DOM 中删除该元素，但是当您搜索时通过输入字段没有事件保留在同一元素上。

Here is solution

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body ng-app="test">
    <h1>Hello Plunker!</h1>
    <input type="text" ng-model="ftr">
    <ul ng-controller="TestController">
      <li ng-repeat="item in list | filter : {name : ftr}">
        <button class="item" ng-click='getEvent()'>{{ item.name }}</button>
      </li>
    </ul>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <script src="app.js"></script>
  </body>

</html>

angular.module('test', [])
.controller('TestController', ['$scope', function($scope) {
  $scope.list = [
    { name: 'a' },
    { name: 'ab' },
    { name: 'abc' },
    { name: 'abcd' },
    { name: 'abcde' }
  ];
  $scope.getEvent = function(){
   $('.item').on('click', function () {alert('ha');});
  }
  setTimeout(function() {
    $('.item').on('click', function () {alert('ha');});
  }, 100);
}]);

另一个解决方案只是一个棘手的问题。

 $('body').on('click','.item', function () {alert('ha');});

将元素附加到未来即将到来的元素上的方法。

【讨论】：

感谢您的解释，这基本上就是我想要的；所以如果我从 DOM 中删除一个元素并将其添加回来，它不会响应预加载的 jQuery 事件，对吗？（即使它仍然持有类）
是的，情况与您的情况相同，直到您再次附加相同的事件。

【解决方案2】：

要让 Angular 始终可以访问 DOM 的元素，您应该使用 ng-click - standard AngularJS directive。

//in HTML
    <button class="item" ng-click="sayHa(item)">{{ item.name }}</button>


//in Javascript
     $scope.sayHa = function(item){
        $window.alert(item.name);
      }

查看modifyed Plunker

【讨论】：

【解决方案3】：

使用 ng-click 代替 jquery 的事件：见Plunker

【讨论】：