dynamically adding DOM element click event function not working in angularJs application

Question

I'm trying to add new DOM element dynamically which has click event handler - already defined function. Here's the code:

HTML

<div ng-app="miniapp" ng-controller="Ctrl">
  <div id="div" ng-click="addingEvent()">DIV </div>
</div>

JavaScript

var $scope;
var app = angular.module('miniapp', []);

function Ctrl($scope) {
   $scope.addingEvent = function(){
      var myEl = angular.element( document.querySelector( '#div' ) );
      myEl.append('<a ng-click="afterEvent()" href="#">anchor addedd </br> </a>'); 
   };

   $scope.afterEvent = function(){
      alert('after event');
   };

};

Here's the demo. As you see, while the anchor is added, the click event is not handled correctly. How to fix it?

Are you using angular directives such as ng-if to manipulate the DOM? You should avoid manipulating it directly whenever possible. — Duncan
– Duncan, Commented Mar 16, 2017 at 10:08
in js fiddle you can check its simple and straight forward requiremnet — Md Shoaib Alam
– Md Shoaib Alam, Commented Mar 16, 2017 at 10:11

raina77ow · Accepted Answer · 2017-03-16 10:25:24Z

2

It's not enough to just append an element into DOM: you'll have to let Angular know about it. One possible approach (listing only the controller here for brevity):

function Ctrl($scope, $compile) {
   var anchorTemplate = '<a ng-click="afterEvent()" href="#">anchor addedd </br> </a>';

   $scope.addingEvent = function(){
     var myEl = angular.element( document.querySelector( '#div' ) );
     var $anchor = angular.element(anchorTemplate);
     $compile($anchor)($scope);
     myEl.after($anchor);
   };
}

Here's the demo to play with, with some good practices applied as well. Yet, as a matter of fact, I'd rather have this functionality implemented as a directive (component in terms of Angular 1.5).

edited Mar 16, 2017 at 10:25

answered Mar 16, 2017 at 10:14

raina77ow

107k16 gold badges205 silver badges240 bronze badges

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

Comments

Nitesh Rana · Accepted Answer · 2017-03-16 10:16:28Z

1

So, I have modified your code using ng-if statement. There is no need to remove or add elements in DOM using old JS ways.

HTML

<div ng-app="miniapp" ng-controller="Ctrl">

<div id="div" ng-click="addingEvent()">DIV <span><a ng-click="afterEvent()" href="#" ng-if="showAnchor">anchor addedd </a></span></div>


</div>

SCRIPT

var $scope;
var app = angular.module('miniapp', []);

function Ctrl($scope) {

            $scope.showAnchor=false;
      $scope.addingEvent = function(){

            $scope.showAnchor=true;

    };
     $scope.afterEvent = function(){
       alert('after event');
    };

};

answered Mar 16, 2017 at 10:16

Nitesh Rana

5121 gold badge8 silver badges24 bronze badges

1 Comment

Md Shoaib Alam Over a year ago

Thanks Nitesh for giving time, i have given that example to demonstration purpose only , basically i have requirement to add anchor link dynamically on the base of API response .

Jayant Patil · Accepted Answer · 2017-03-16 10:20:30Z

1

Solved Jsfiddle demo updated

    myEl.append($compile('<a ng-click="afterEvent()" href="#">anchor addedd </br> </a>')($scope));

This will work

answered Mar 16, 2017 at 10:20

Jayant Patil

1,5872 gold badges11 silver badges18 bronze badges

Collectives™ on Stack Overflow

dynamically adding DOM element click event function not working in angularJs application

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related