Sharing Top Content from the Angular-sphere.

jQuery and AngularJS: Bind Events to Changing DOM – Angular.js Recipes – Medium

  • Anyway, an issue I have is that I’m using JQuery (latest version) to bind a few mouse over and mouse click events on elements in the DOM with the same class as those added to the DOM by the ng-repeat and include.
  • JQuery doesn’t seem to apply the event handlers to the new DOM addition, though.In previous versions .
  • ;});In the latest version of jQuery, in order to have events that update based on DOM changes, you want to 1.
  • Get a selector for the nearest parent element (ex):div class=”myDiv”div class=”myDynamicDiv”/div!
  • myDynamicDiv.Thus, you want jQuery to have the events on the PARENT of the element so if the child elements change, it will still work:$(‘.

In my DOM in AngularJS, I am using an ng-include inside a ng-repeat directive. It is loading the HTML just fine. Anyway, an issue I have is that I’m using JQuery (latest version) to bind a few mouse…

@ng_real_ninja: jQuery and AngularJS: Bind Events to Changing DOM #javascript

In my DOM in AngularJS, I am using an ng-include inside a ng-repeat directive. It is loading the HTML just fine. Anyway, an issue I have is that I’m using JQuery (latest version) to bind a few mouse over and mouse click events on elements in the DOM with the same class as those added to the DOM by the ng-repeat and include. JQuery doesn’t seem to apply the event handlers to the new DOM addition, though.

In previous versions .live() seemed to do what I want, but it has been removed in the latest version. Should I clear the bindings on the elements and re-create them every time the DOM has additional elements of the class added?

Problem courtesy of: Christian Stewart

Answer here:

This is a multifaceted question. First of all, all jQuery code events should use $scope.$apply to execute angularjs code as expected. Example:

In the latest version of jQuery, in order to have events that update based on DOM changes, you want to 1. Get a selector for the nearest parent element (ex):

In this case, your parent selector would be “.myDiv”, and your child selector would be .myDynamicDiv.

Thus, you want jQuery to have the events on the PARENT of the element so if the child elements change, it will still work:

Notice that the $scope.$apply() is used in order to enable jQuery to access those angular variables.

Hope this helps! Christian

Solution courtesy of: Christian Stewart

jQuery and AngularJS: Bind Events to Changing DOM – Angular.js Recipes – Medium

Comments are closed, but trackbacks and pingbacks are open.