AngularJS 过滤器 jQuery 事件不起作用

Question

我有一个来自 $scope 的项目列表，我将 jQuery 事件与它们绑定，我使用输入字段来过滤列表。一切都按预期工作。

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

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

我该如何解决这个问题？

提前致谢。

更新：

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

Answer 1

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

Answer 2

问题出在 angular 过滤器上，您应该清楚它的功能性过滤器不仅不隐藏 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');});

这是将元素附加到未来元素的方法。

Answer 3

要让 DOM 的元素始终可供 Angular 访问，您应该使用 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

AngularJS 过滤器 jQuery 事件不起作用

AngularJS filter with jQuery event not working

javascript

jquery

angularjs

angularjs-filter