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
– Juan, Commented Aug 18, 2016 at 23:18
is there a reason for using Jquery it would be much easier if you just use Angular — Ja9ad335h
– Ja9ad335h, Commented Aug 18, 2016 at 23:21
I dont know angularJS too well. I just started learning it though — srsxyz
– srsxyz, Commented Aug 18, 2016 at 23:27

Community · Accepted Answer · 2017-05-23 12:22:53Z

1

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

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Aug 18, 2016 at 23:18

Kaushal Niraula

5763 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MiGu3X · Accepted Answer · 2016-08-18 23:11:04Z

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, 2016 at 23:11

MiGu3X

1191 silver badge16 bronze badges

Comments

Ja9ad335h · Accepted Answer · 2016-08-19 00:02:03Z

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>

Collectives™ on Stack Overflow

Using jquery with dynamically created elements from angular doesnt work

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related