[英]Using jquery with dynamically created elements from angular doesnt work
我試圖使用jquery來操縱由angular創建的元素,但是我無法使其工作。 我想知道是否有人可以幫助我。 謝謝
這是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');
});
});
動態創建新元素后,應立即調用該代碼,因為該代碼為具有。Patient類而不是新類的實際元素 (當您調用函數時)設置了處理程序。
ng-repeat每次檢測到更改都會重新創建DOM(因此,所有附加事件都將消失)。 因此,要在ng-repeat完成后重新附加事件,您可以
<tbody ng-repeat="patient in patients" ng-init="$last && ngRepeatFinish()">
$last
為ng-repeat
的最后一項,則將其設置為true
在您的控制器中,創建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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.