angular click event for element loaded via http request not works

Question

codepen link : http://codepen.io/gauravcoder/pen/vLWEjJ?editors=101 i am new to angular js

i have items on click on which i put alert now, it works fine issue is that when item is loaded via http request click event does not works.

html code: (alert for first two non ajax items works only where as for other loaded via ajax call it does not works)

<ion-list>
    <div style="height:40px;border-bottom:1px solid #ccc" id="clickit">
          Item No Ajax call
    </div>
    <div style="height:40px;border-bottom:1px solid #ccc" id="clickit">
          Item No Ajax call
    </div>
    <div ng-repeat="item in items" style="height:40px;border-bottom:1px solid #ccc" id="clickit">
          Item Ajax Call: {{ item.username }}
    </div>

</ion-list>
<ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>

</ion-content>

js code

angular.module('ionicApp', ['ionic']).controller('MyCtrl', function($scope,$http) {
    $("div#clickit").click(function() {
        alert('hey');
    });


    $scope.noMoreItemsAvailable = false;
    $scope.currentPage = 0;
    $scope.loadMore = function() {
        $http.get('http://mourjewels.com/www/stones2.php?page='+$scope.currentPage).success(function(items) { 
            $scope.currentPage += 1;
            $scope.items = $scope.items.concat(items.data);
            console.log(items.count);
            $loopcount =  Math.ceil(items.count/10);
            console.log($loopcount);
            $scope.$broadcast('scroll.infiniteScrollComplete');
            if($scope.currentPage >= $loopcount){
                $scope.$broadcast('scroll.infiniteScrollComplete');
                $scope.noMoreItemsAvailable = true;
            }
        });

      };

      $scope.items = [];
});

Prashant · Accepted Answer · 2016-01-18 10:36:33Z

1

This is because Angular executes your controller script before the AJAX loaded elements are injected to the DOM.

Anyway, in Angular there is definitely a different approach to this. You can use Angular's ng-click directive.

In your controller,

$scope.doSomething = function () {
    // Does something
};

In your HTML,

<div ng-click="doSomething()"></div>

Things like ng-repeat, ng-click are called Directives in Angular and are just custom extensions to the native DOM. ng- prefixed directives comes packed with Angular core. Everytime AngularJS updates the DOM, it collects the directives present in the DOM and executes the directives. So, in your case, ng-repeat and ng-click directives are executed. ng-click basically registers onclick DOM event handler to execute the given function (doSomething) on the current scope. So, it will work no matter how or when that DOM is injected.

Very simplified explanation of course. But I hope it makes sense to you :)

edited Jan 18, 2016 at 10:36

answered Jan 18, 2016 at 10:29

Prashant

8,1403 gold badges27 silver badges25 bronze badges

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

5 Comments

saurav Over a year ago

thanks for same can u tell if i write <img src="img/011.png" alt="top" ng-click="doSomething()"/> can i get clicked element src ?

Prashant Over a year ago

sure, ng-click="doSomething($event)" in your HTML and $scope.doSomething = function (event) { // event.target is your element }

Prashant Over a year ago

But, instead of having DOM logics in the controller, i would create a custom directive and handle the DOM there.

saurav Over a year ago

thanks for same can u tell refrence site where i can alternative to jquery event in angular js like next(); and other

Prashant Over a year ago

next() is not an event. What exactly do you mean?

Collectives™ on Stack Overflow

angular click event for element loaded via http request not works

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related