Jquery events not working properly with AngularJS

Question

I have a simple menu code with AngularJS. When the document load I send an array to prepare the menu. In that sequence I also wrote the click event to that generated menu. But it does not firing if the click handler before the menu preparation.

When I change the sequence of click event to after the menu prepare it working perfectly.

The working sequence I mentioned in comments of below code.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="MenuStyle.css">



<title>Welcome</title>

</head>

<body ng-app="myApp" ng-controller="myCtrl">

    <div id='cssmenu' >
        <ul>
            <li ng-repeat="menus in menuList track by $index" ng-init="Index = $index" class='active has-sub open clickthis'>
                <a><span>{{menus.mainmenu}}</span></a>
                <ul>
                    <li ng-repeat="sub in menus.submenu" class='last'><a>{{sub}}</a></li>
                </ul>
            </li>
        </ul>
    </div>

</bodY>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {


    $(document).ready(function(){

        //Why this not handle the click event
        //If i create the li by dynamically using jquery this will handle the click event.
        //But Angular generated li does not handles.
        //What is the reason.
        $(".clickthis").click(function(){alert('hai');});

        $scope.menuList=    [
        {mainmenu:'main1',submenu:['sub1','sub2']},
        {mainmenu:'main2',submenu:['sub1','sub2','sub3']},
        {mainmenu:'main3',submenu:['sub1','sub2','sub3','sub4']},
        {mainmenu:'main4',submenu:['sub1','sub2']}                          
        ];  
        $scope.$apply();
        $('#cssmenu li>ul').slideDown();


        //Why the below line handle the click event
        //What is the difference between above line and below line.
        //$(".clickthis").click(function(){alert('hai');});

    });
});
</script>
</html>

What is the reason or logic behind this. Please give the clarity on this.

possible duplicate of [Call jQuery function from AngularJS Controller](http://stackoverflow.com/questions/22714286/call-jquery-function-from-angularjs-controller) — Rahil Wazir, Jul 02 '15 at 04:54

score 2 · Answer 1 · edited May 23 '17 at 11:58

Why this not handle the click event

Because Angular hasn't yet rendered anything. In other words you are trying to bind event before DOM is available for this.

Of course you could play with timing/script placement, etc. but this all just clumsy workaronds. The proper way for settings things up is to avoid useing jQuery they way you are used, and use dedicated tools Angular provides: in your case ngClick ditrective.

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {

    $scope.manuClick = function(item) {
        alert(item.mainmenu);
    };

    $scope.menuList = [{
        mainmenu: 'main1',
        submenu: ['sub1', 'sub2']
    }, {
        mainmenu: 'main2',
        submenu: ['sub1', 'sub2', 'sub3']
    }, {
        mainmenu: 'main3',
        submenu: ['sub1', 'sub2', 'sub3', 'sub4']
    }, {
        mainmenu: 'main4',
        submenu: ['sub1', 'sub2']
    }];

});

with HTML:

<div id='cssmenu' >
    <ul>
        <li class='active has-sub open clickthis'
            ng-repeat="menus in menuList track by $index" 
            ng-init="Index = $index" 
            ng-click="menuClick(menus)">
            <a><span>{{menus.mainmenu}}</span></a>
            <ul>
                <li ng-repeat="sub in menus.submenu" class='last'><a>{{sub}}</a></li>
            </ul>
        </li>
    </ul>
</div>

Also make sure you fully understand what it means "Thinking in AngularJS" if I have a jQuery background?

score 0 · Accepted Answer · answered Jul 02 '15 at 05:42

https://jsfiddle.net/j4wfmq2o/

$(document).on("click",".clickthis",function() { alert("THis will work Because you are binding Eventhandler at Document level before DOM renders Menu/submenu."); });

 var app= angular.module('myApp',[]);
app.controller('myCtrl', function($scope) {
   
    $(document).on("click",".clickthis",function() {
        alert("THis will work Because you are binding Eventhandler at Document level before DOM renders Menu/submenu.No Need to put document ready..");
    });
    
     $(".clickthis").click(function(){alert('hai... THis will not work because DOM for menu is not ready yet. ');});
    

    $scope.menuList=    [
        {mainmenu:'main1',submenu:['sub1','sub2']},
        {mainmenu:'main2',submenu:['sub1','sub2','sub3']},
        {mainmenu:'main3',submenu:['sub1','sub2','sub3','sub4']},
        {mainmenu:'main4',submenu:['sub1','sub2']}                          
        ];  
        $scope.$apply();
        $('#cssmenu li>ul').slideDown();
  

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>

<div ng-app="myApp">
<div ng-controller='myCtrl'>
 
     <div id='cssmenu' >
        <ul>
            <li ng-repeat="menus in menuList track by $index" ng-init="Index = $index" class='active has-sub open clickthis'>
                <a><span>{{menus.mainmenu}}</span></a>
                <ul>
                    <li ng-repeat="sub in menus.submenu" class='last'><a>{{sub}}</a></li>
                </ul>
            </li>
        </ul>
    </div>
    
    
</div>
</div>

Jquery events not working properly with AngularJS

2 Answers2