I am in the process of converting my multipaged php + jquery website into a single page angular app. However I have written a lot of code with jquery already so only intend to swap the php for angular in regards to the routing etc.
One problem I have e across that I can't figure out is that the jquery click events I have been using up until the convert have stopped working. If change the code to make it fire from an ng-click instead it will work, also if I call the function from the console. jquery is working, I put some jquery inside the mentioned function and it worked fine.
<!doctype html>
<html ng-app="myApp">
<head>
<link href="css/header.css" rel="stylesheet">
<script src=".3.11/angular.js"></script>
<script src=".2.4/firebase.js"></script>
<script src=".9.2/angularfire.min.js"></script>
<script type='text/javascript' src="js/jquery.min.js"></script>
<script type='text/javascript' src='js/header.js'></script>
<script type='text/javascript' src='main.js'></script>
</head>
<header-page></header-page>
main.js:
var mainApp = angular.module('myApp', ['firebase', 'headerPage']);
mainApp.directive('headerPage', function(){
return{
restrict: 'E',
templateUrl: 'html/header.html'
}
});
header.js
(function() {
var app = angular.module('headerPage', ['firebase']);
app.controller("headController", ['$http', '$firebase', '$scope', '$filter',
function($http, $firebase, $scope, $filter) {
//most of the code
}
]);
})();
$("#myElement").on("click", function() {
console.log("clicked");
});
I am in the process of converting my multipaged php + jquery website into a single page angular app. However I have written a lot of code with jquery already so only intend to swap the php for angular in regards to the routing etc.
One problem I have e across that I can't figure out is that the jquery click events I have been using up until the convert have stopped working. If change the code to make it fire from an ng-click instead it will work, also if I call the function from the console. jquery is working, I put some jquery inside the mentioned function and it worked fine.
<!doctype html>
<html ng-app="myApp">
<head>
<link href="css/header.css" rel="stylesheet">
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.3.11/angular.js"></script>
<script src="https://cdn.firebase./js/client/2.2.4/firebase.js"></script>
<script src="https://cdn.firebase./libs/angularfire/0.9.2/angularfire.min.js"></script>
<script type='text/javascript' src="js/jquery.min.js"></script>
<script type='text/javascript' src='js/header.js'></script>
<script type='text/javascript' src='main.js'></script>
</head>
<header-page></header-page>
main.js:
var mainApp = angular.module('myApp', ['firebase', 'headerPage']);
mainApp.directive('headerPage', function(){
return{
restrict: 'E',
templateUrl: 'html/header.html'
}
});
header.js
(function() {
var app = angular.module('headerPage', ['firebase']);
app.controller("headController", ['$http', '$firebase', '$scope', '$filter',
function($http, $firebase, $scope, $filter) {
//most of the code
}
]);
})();
$("#myElement").on("click", function() {
console.log("clicked");
});
- I mainly want to remove the php so I can get it to work for phonegap. I have thousands of lines of code with perfectly functional jquery (...well I did) So it would take me a long time to change it for no real gain. – Marty.H Commented May 19, 2015 at 18:12
-
jquery's
event delegationmight work, posted as a possible solution below. give it a shot. – Shehryar Abbasi Commented May 19, 2015 at 18:27 - @Shehryar: That didn't work sorry. – Marty.H Commented May 19, 2015 at 18:53
- @Marty.H ..hmm, just for hacking for hacking's sake, i tried out the jquery event delegation method in an angularjs controller here: fiddle ..and the click event is being registered in the console. – Shehryar Abbasi Commented May 19, 2015 at 21:04
3 Answers
Reset to default 7The reason is because, when you bind the event to the element #myElement the element does not exist yet. Since that element is being rendered as a part of the directive template you would need to move the bind handler inside the directive link function. Well, you could technically use event delegation to solve the issue but it is just another hack upon hack. Best bet would be to use ng-click itself on the element (Which you already said you have tried out).
Try using ng-click instead https://docs.angularjs/api/ng/directive/ngClick
<div id="myElement" ng-click="myFunction()"></div>
Then inside your controller simply declare the function
myApp.controller('MyController', ['$scope', function($scope) {
$scope.myFunction = function() {
//Content here
}
}]);
I know this doesn't really resolve the issue with jQuery but it helps to keep code all under one framework.
alternatively: if you want to stick with jquery ..you may be able to make use of jquery's event delegation :
for example:
HTML
<div id="parent">
<a href="#" class="child">Click Here</a>
</div>
JS:
$('#parent').on('click', '.child', function() {
console.log("click");
});
EDIT: added fiddle fwiw: https://jsfiddle/ge59sbtp/