简体   繁体   中英

Using jquery with dynamically created elements from angular doesnt work

Im trying to use jquery to manipulate elements created by angular, but I am not able to get it to work. I was wondering if anyone could help me out. Thanks

Here is the 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>

Here is the jquery

$(function() {
$('.patients').on('click', ".sendreminder",function(e){
         alert('worked');
    });

});

动态创建新元素后,应立即调用该代码,因为该代码为具有。Patient不是新类的实际元素 (当您调用函数时)设置了处理程序。

ng-repeat recreates DOM everytime it detects changes(and hence, all the attached events will be gone). So to reattach the events after ng-repeat finishes, you can do

<tbody ng-repeat="patient in patients" ng-init="$last && ngRepeatFinish()">

$last will be set to true if its the last item for ng-repeat

and in you controller, create ngRepeatFinish() function

$scope.ngRepeatFinish = function(){
    $('.sendreminder').click(function(e){
         alert('worked');
    });
}

you can also make custom directives for this which is better than this, but this will suffice for a quick solution. See this for a solution with custom directives

i recommend you to use Angular instead of Jquery

added both methods below

 //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> 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM