Использование jquery с динамически создаваемыми элементами из углового не работает

Question

Im пытается использовать 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'); 
    }); 

}); 

Answer 1

ng-repeat воссоздает DOM каждый раз, когда он обнаруживает изменения (и, следовательно, все прикрепленные события исчезнут). Так прикрутите события после нг-повторных отделок, вы можете сделать

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

$last будет установлен верно, если его последний элемент для ng-repeat

и в вас контроллер, создать ngRepeatFinish() функцию

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

вы также можете сделать индивидуальные директивы для этого, что лучше, чем это, но этого достаточно для быстрого решения. См this решение с пользовательскими директивами

Answer 2

Вы должны вызвать этот код сразу после того, как динамически создать новый элемент, так что код устанавливает обработчик для фактической элементы (при вызове функции), которые имеют класс . Стационарные, а не новые ...

Answer 3

я рекомендую вам использовать 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>