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

Question

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

0

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

});

srsxyz 19 авг. 2016, в 01:35

Источник

0

как выглядит ваш визуализированный html? потому что я могу видеть пару проблем с разметкой, которую вы используете ... tbody должен идти внутри тега table , tr может иметь только потомков типа td или th , а не div
Juan Castillo 18 авг. 2016, в 23:18
0

есть ли причина для использования Jquery было бы гораздо проще, если вы просто используете Angular
Ja9ad335h 18 авг. 2016, в 23:21
0

Я не слишком хорошо знаю angularJS. Я только начал изучать это, хотя
srsxyz 18 авг. 2016, в 23:27

Показать ещё 1 комментарий

Теги:

javascript

jquery

html

angularjs

3 ответа

1

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

Ja9ad335h 18 авг. 2016, в 22:16

1

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

MiGu3X 18 авг. 2016, в 20:37

Ещё вопросы

как выглядит ваш визуализированный html? потому что я могу видеть пару проблем с разметкой, которую вы используете ... tbody должен идти внутри тега table , tr может иметь только потомков типа td или th , а не div
есть ли причина для использования Jquery было бы гораздо проще, если вы просто используете Angular
Я не слишком хорошо знаю angularJS. Я только начал изучать это, хотя

Kaushal Niraula · Accepted Answer · 2016-08-18T21-55-00.000Z

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

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

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

и в вашем контроллере создайте ngRepeatFinish()

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

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