Using jquery with dynamically created elements from angular doesnt work

Question

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');
    });

});

how does your rendered html looks like? because i can see couple issues with the markup you are using... `tbody` should go inside a `table` tag, `tr` can only have children of type `td` or `th`, not a `div` — Juan, Aug 18 '16 at 23:18
is there a reason for using `Jquery` it would be much easier if you just use `Angular` — Ja9ad335h, Aug 18 '16 at 23:21
I dont know angularJS too well. I just started learning it though — srsxyz, Aug 18 '16 at 23:27

score 1 · Answer 1 · answered Aug 18 '16 at 23:11

1

You should call that code immediately after you dynamically create the new element since that code sets the handler for the actual elements (when you call the function) that have class .patients, not the new ones...

answered Aug 18 '16 at 23:11

MiGu3X

119
1
15

score 1 · Accepted Answer · edited May 23 '17 at 12:22

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

Ja9ad335h · Answer 3 · 2016-08-19T00:02:03.030

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>

Using jquery with dynamically created elements from angular doesnt work

3 Answers3