Я пытаюсь использовать jquery для манипулирования элементами, созданными угловыми, но я не могу заставить его работать. Мне было интересно, сможет ли кто-нибудь помочь мне. благодаря
Вот HTML
<div class="patients">
<tbody ng-repeat="patient in patients">
<tr>
<td>{{patient.name}}</td>
<td>{{patient.number}}</td>
<td>{{patient.date}}</td>
<td id="item-{{$index}}">{{patient.reminded}}</td>
<div class="sendreminder">
<td>
<a href="" class="btn btn-info btn-sm sendreminder" style=" background-color: #00e699; border-color:#00e699; " ng-click="post($index) " "$parent.selected = $index" id="button-{{$index}}">
<span class="glyphicon glyphicon-send"></span> Request Payment
</a>
</td>
</div>
<td>
<a href="" style="text-decoration:none; color:inherit; scale: 4" class="pe-7s-info">
</a>
</td>
</tr>
</tbody>
</div>
Вот jQuery
$(function() {
$('.patients').on('click', ".sendreminder",function(e){
alert('worked');
});
});
ng-repeat воссоздает DOM каждый раз, когда он обнаруживает изменения (и, следовательно, все связанные события не будут удалены). Чтобы повторно связать события после завершения ng-repeat, вы можете сделать
<tbody ng-repeat="patient in patients" ng-init="$last && ngRepeatFinish()">
$last
будет установлено значение true, если последний элемент для ng-repeat
и в вашем контроллере создайте ngRepeatFinish()
$scope.ngRepeatFinish = function(){
$('.sendreminder').click(function(e){
alert('worked');
});
}
вы также можете создавать настраиваемые директивы для этого, что лучше, чем это, но этого достаточно для быстрого решения. См. Это для решения с пользовательскими директивами
я рекомендую использовать Angular
вместо Jquery
добавлены оба метода ниже
//using Jquery
$('.patients').on('click', ".sendreminder", function(e) {
alert('from JQuery');
});
function TestCtrl($scope) {
$scope.patients = [{
name: 'one',
number: 1,
date: '2016-08-16',
reminded: true
}, {
name: 'two',
number: 2,
date: '2016-08-16',
reminded: true
}, {
name: 'three',
number: 3,
date: '2016-08-16',
reminded: false
}];
//using angular
$scope.post = function(i) {
alert('from Angular');
var selectedPatient = $scope.patients[i];
console.log(selectedPatient);
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app>
<div class="patients" ng-controller="TestCtrl">
<table>
<thead>
<tr>
<th>Name</th>
<th>Number</th>
<th>Date</th>
<th>Reminded</th>
<th>Request</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="patient in patients">
<td>{{patient.name}}</td>
<td>{{patient.number}}</td>
<td>{{patient.date}}</td>
<td id="item-{{$index}}">{{patient.reminded}}</td>
<td>
<a href="" class="btn btn-info btn-sm sendreminder" style="background-color: #00e699; border-color:#00e699;" ng-click="post($index)" id="button-{{$index}}">
<span class="glyphicon glyphicon-send"></span> Request Payment
</a>
</td>
<td>
<a href="" style="text-decoration:none; color:inherit; scale: 4" class="pe-7s-info">test
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Вы должны вызвать этот код сразу после того, как вы динамически создаете новый элемент, поскольку этот код устанавливает обработчик для фактических элементов (когда вы вызываете функцию), у которых есть класс .patients, а не новые...
tbody
должен идти внутри тегаtable
,tr
может иметь только потомков типаtd
илиth
, а неdiv
Jquery
было бы гораздо проще, если вы просто используетеAngular