Can't click my button inside ng-repeat using jQuery

Question

I have an ng-repeat repeating some data from my table and on each card there's a button you can press, I want this button to just make an alert when you press it and this is my current code:

 <div class="row" ng-repeat="data in ids">
        <div class="row">
              <!--<div class="col s12 m6">-->
              <center>
        <div class="flipcard">
                <div class="card blue-grey darken-1">
                  <div class="card-content white-text">
                    <p>{{data.amount}} coin wager with {{data.posted_nickname}}
                    <a id="joinflip" class="right waves-effect waves-light btn"><i class="material-icons left">games</i>Play</a>                  </div>
                         </div>
                         </div>
                         </center>

            </div>

      </div>

And this is my JavaScript:

$(document).ready(function () {

     $("#joinflip").click(
         function () {
             alert("Alert Message OnClick");
         }            
     );
 });

The button works outside of the ng-repeat loop but when within ng-repeat it never triggers the onclick, thanks for any help

do try out this `app = angular.module('two_way', []); app.controller('two_way_control', function($scope, $http, $interval) { load_pictures(); $interval(function() { load_pictures(); }, 300); function load_pictures() { $http.get('http://localhost:3000/loadcoinflips').success(function(data) { $scope.ids = data; }); }; $scope.myFunction = function() { alert('Called') } });` — Pankaj Parkar, Mar 03 '16 at 20:56
Strongly suggest reading: [thinking-in-angularjs-if-i-have-a-jquery-background](http://stackoverflow.com/q/14994391/1175966) — charlietfl, Mar 03 '16 at 21:07
Good answer but you should've noted this was for ngClick, thanks for the repsonse though — iJamesPHP, Mar 04 '16 at 10:21

score 1 · Accepted Answer · answered Mar 03 '16 at 20:41

1

That's because ng-repeat elements are created after document fired 'ready' event. You should use ngClick instead.

answered Mar 03 '16 at 20:41

m1gu3l

763
1
6
19

Sorted it! Did some reading up on ngClick and was exactly what I needed thanks. – iJamesPHP Mar 04 '16 at 10:20
Sorry very new to SO, will try and do it now – iJamesPHP Mar 04 '16 at 17:36

Waldemar Neto · Answer 2 · 2016-03-03T21:13:06.207

0

The problem is because the DOM is not ready yet. you need to use event delegation (you need to use a class instead of an ID because they will repeat)

$(document).on("click", ".joinflip", function() {
  console.log("clicked");
});

Hope it help :D

edited Mar 03 '16 at 21:13

answered Mar 03 '16 at 20:41

Waldemar Neto

826
6
17

Though I didn't downvoted your answer..but could you explain, how can this would work with angular? – Pankaj Parkar Mar 03 '16 at 20:54
2

Can't have duplicate ID's in a page. This won't work. And how do you plan to integrate this with angular scope – charlietfl Mar 03 '16 at 20:56
@charlietfl are you sure, i didn't see that is an loop, i just updated the answer. – Waldemar Neto Mar 03 '16 at 21:14
1

`ng-repeat` is most certainly a loop. Making the suggestion you are making is just not a good practice in an angular app – charlietfl Mar 03 '16 at 21:15
Thanks for the quick response, however this doesn't work and ngClick is needed, I have now fixed it, thanks. – iJamesPHP Mar 04 '16 at 10:19

Can't click my button inside ng-repeat using jQuery

2 Answers2