Dynamic content added with AngularJS click event not working on the added content

Asked 8/11, 2014 at 16:16 Answered 8/11, 2014 at 16:57

Solved angularjs angularjs-ng-click dynamic-html

I just started on AngularJS this week for a new project, and I have to come up to speed ASAP.

One of my requirements, is to add html content dynamically and that content might have a click event on it.

So the code Angular code I have below displays a button, and when clicked, it dynamically adds another button. Clicking on the dynamically added buttons, should add another button, but I cannot get the ng-click to work on the dynamically added buttons

<button type="button" id="btn1" ng-click="addButton()">Click Me</button>

The working code sample is here http://plnkr.co/edit/pTq2THCmXqw4MO3uLyi6?p=preview

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.addButton = function() {
    alert("button clicked");
    var btnhtml = '<button type="button" ng-click="addButton()">Click Me</button>';
    angular.element(document.getElementById('foo')).append((btnhtml));
  }
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="[email protected]" src="//code.angularjs.org/1.3.0/angular.js" data-semver="1.3.0"></script>

</head>

<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
  <div id="foo">
  <button type="button" id="btn1" ng-click="addButton()">Click Me
  </button>
  </div>  
</body>

</html>

http://plnkr.co/edit/pTq2THCmXqw4MO3uLyi6?p=preview

Graces answered 8/11, 2014 at 16:16 Comment(0)

app.controller('MainCtrl', function($scope,$compile) {

    var btnhtml = '<button type="button" ng-click="addButton()">Click Me</button>';
    var temp = $compile(btnhtml)($scope);

    //Let's say you have element with id 'foo' in which you want to create a button
    angular.element(document.getElementById('foo')).append(temp);

   var addButton = function(){
       alert('Yes Click working at dynamically added element');
   }

});

you need to add $compile service here, that will bind the angular directives like ng-click to your controller scope. and dont forget to add $compile dependency in your controller as well like below.

here is the plunker demo

Ferity answered 8/11, 2014 at 16:19 Comment(4)

Thanks a lot, this is a great help – Graces 8/11, 2014 at 17:49

What you mean with 'foo' ? Where you call document.getElementById('foo').append(temp) – Stylolite 10/11, 2016 at 5:13

The only complete answer, i found. Got it working without any headache, because it has a clean plunker demo as well. – Stoller 15/12, 2016 at 12:17

I think addButton should be scoped function like $scope.addButton=function(){....} – Selfstyled 10/4, 2019 at 7:22

You could also bind the event to your new button.

  $scope.addButton = function() {
    alert("button clicked");
    var btnhtml = '<button type="button">Click Me</button>';
    var newButt = angular.element(btnhtml);
    newButt.bind('click', $scope.addButton);
    angular.element(document.getElementById('foo')).append(newButt);
  }

Updated plunkr.

Richelieu answered 8/11, 2014 at 16:57 Comment(1)

Just a little tidbit note: as of Angularjs 2.0, jqLite is going to no longer be part of Angular. So people may as well start using jQuery now. – Judgemade 8/11, 2014 at 17:8

Recommended topics

Hot tags