jquery click event is not working with angular.js ng-repeat

Question

I have a nested (tertiary) menu list with a jquery click event on the back. jQuery click does not fire when the menu item is clicked. The jQuery event works well if the values inside the HTML are static.

HTML:

<div>
<ul class="collapsible-list" ng-controller="ViewCtrl">
    <li class="collapsible-list-subnav" ng-repeat="view in views">
        <a class="collapsible-list-parent">{{view.name}}</a>
        <ul class="collapsible-list secondary">
            <li class="collapsible-list-subnav">
                <a class="collapsible-list-parent">Public Views</a>
                <ul class="collapsible-list tertiary">
                    <li ng-repeat="publicview in view.publicviews">
                        <a>{{publicview.title}}</a>
                    </li>
                </ul>
            </li>
            <li class="collapsible-list-subnav">
                <a class="collapsible-list-parent">Private Views</a>
                <ul class="collapsible-list tertiary">
                    <li ng-repeat="privateview in view.privateviews">
                        <a>{{privateview.title}}</a>
                    </li>
                </ul>
            </li>   
        </ul>
    </li>
</ul>

Javascript:

define([ 'angular', 'controllers-module'], function(angular,
    controllers) {

    controllers.controller("ViewCtrl", [
        "$scope",
        "$rootScope",
        "directiveBinder",
        '$timeout',
        '$stateParams',
        '$resource',
        '$state',
        function($scope, $rootScope,directiveBinder, $timeout, $stateParams, $resource, $state) {

            $scope.engines = [ {
            name : 'name1',
            publicviews : [ {
                title : 'First public View'
            } ],
            privateviews : [ {
                title : 'First private View'
            } ]
        }, {
            name : 'name2',
            publicviews : [ {
                title : 'Second public View'
            } ],
            privateviews : [ {
                title : 'Second private View'
            } ]
        } ];

        $('.collapsible-list-parent').click(function(e) {
            e.preventDefault();
            $(this).next().slideToggle('fast');
            if ($(this).parent().hasClass('open')) {
                $(this).parent().removeClass('open');
            } else {
                $(this).parent().addClass('open');
            }
        });
    });

what jquery version are you using? have you tried to use $(document).on('click', ...? why are you using jquery and not ng-click? — Moshe Shaham
– Moshe Shaham, Commented Mar 10, 2015 at 7:24
I would suggest you to use Collapse (ui.bootstrap.collapse), do it angularjs way. — Satpal
– Satpal, Commented Mar 10, 2015 at 7:26
Poosible duplicate: stackoverflow.com/questions/20482047/… — SharpCoder
– SharpCoder, Commented Jul 13, 2015 at 7:33

Cristi Marian · Accepted Answer · 2015-03-10 07:21:55Z

4

Because the elements are added dynamically by ng-repeat the .click event is not binded to them. Try to use .delegate

$( "ul" ).delegate( ".collapsible-list-parent", "click", function() {
  // code here
});

answered Mar 10, 2015 at 7:21

Cristi Marian

4538 silver badges18 bronze badges

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

4 Comments

empiric Over a year ago

First: you link is broken, second: delegate is superseded by .on()

Cristi Marian Over a year ago

Solved the link issue, due to the fact that i have no idea what jQuery version he is running, it seemed like the best solution.

brainmassage Over a year ago

@CristiMarian Thanks for the solution. My jQuery is v1.10.2. I've got an issue with the jQuery collapse animation though. After the click happens the menu collapses but after a second it uncollapses immediately. Any thoughts on that?

Cristi Marian Over a year ago

Can you send me link to a fiddle where you can reproduce it? I'll try to see what's causing it.

Sreekanth Karini · Accepted Answer · 2016-02-25 11:38:47Z

3

When we use ng-repeat and need to trigger a jquery click event just try this it worked for me.

$(document).on("click", ".className", function() {

//your code here...

});

answered Feb 25, 2016 at 11:38

Sreekanth Karini

1,28514 silver badges14 bronze badges

Comments

Arun P Johny · Accepted Answer · 2015-03-10 07:29:17Z

I don't think using jQuery code in an angularjs controller is the right way to do this, a sample to do the same without the animation will be like

var app = angular.module('my-app', [], function() {

})

app.controller('ViewCtrl', function($scope) {
  $scope.views = [{
    name: 'name1',
    publicviews: [{
      title: 'First public View'
    }],
    privateviews: [{
      title: 'First private View'
    }]
  }, {
    name: 'name2',
    publicviews: [{
      title: 'Second public View'
    }],
    privateviews: [{
      title: 'Second private View'
    }]
  }];
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app">
  <ul class="collapsible-list" ng-controller="ViewCtrl">
    <li class="collapsible-list-subnav" ng-repeat="view in views">
      <a class="collapsible-list-parent" ng-click="open = !open">{{view.name}}</a>
      <ul class="collapsible-list secondary" ng-show="open">
        <li class="collapsible-list-subnav">
          <a class="collapsible-list-parent" ng-click="popen = !popen">Public Views</a>
          <ul class="collapsible-list tertiary" ng-show="popen">
            <li ng-repeat="publicview in view.publicviews">
              <a>{{publicview.title}}</a>
            </li>
          </ul>
        </li>
        <li class="collapsible-list-subnav">
          <a class="collapsible-list-parent" ng-click="ropen = !ropen">Private Views</a>
          <ul class="collapsible-list tertiary" ng-show="ropen">
            <li ng-repeat="privateview in view.privateviews">
              <a>{{privateview.title}}</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

If you want to use animations you can make use of angularjs animation which uses css3 animations.

I cannot run the code snippet unfortunately, because of the company restrictions.

Collectives™ on Stack Overflow

jquery click event is not working with angular.js ng-repeat

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related