javascript - AngularJS filter with jQuery event not working -
i have list of items $scope, , bind jquery event them, , use input field filter list. works expected.
when type in input field, items filtered out still bound jquery event; however, if delete text input field, re-appearing items seem out of scope.
you can check this plunker. when click on button in list, alert pop up, if type b in input box, , delete it, clicking button text a not show pop up.
how can fix this?
thanks in advance.
update:
thanks answers, i'm sorry mislead using such simple example :/ actual situation quite different. anyway, using jquery .on not idea here, should pass $event object function within scope, , handle dom element inside function.
the problem angular filter, should clear functionality filter not hide element dom remove element dom @ first time events gets attached element when search through input field no events remain on same element.
<!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); }]); one more solution tricky .
$('body').on('click','.item', function () {alert('ha');}); it's method attach element on future coming element.
Comments
Post a Comment