jQuery on('click') not working in external JS file

ionic-v1
1

Button click handler doesn’t work but ‘loaded’ alert does work. jQuery library script called before Angular scripts.

$(document).ready(function() {
  alert('loaded');
  $('#test').on('click', function() {
  alert('clicked');
});

No errors in console, just this:

event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

However If I move this code inside a controller it works fine.

   $scope.$on('$viewContentLoaded', function() {
        $('#test').on('click', function() {
        alert('clicked');
    }

Any ideas?

2

What is your HTML? .

3 
<!DOCTYPE html>

<!-- ionic css -->
<link href="lib/css/ionic.css" rel="stylesheet">

<!-- your app's css -->
<link href="css/app.css" rel="stylesheet">

<script src="js/vendor/jquery-2.0.0.min.js"></script> 


<!-- angularjs scripts -->
<script src="lib/js/ionic.js"></script>
<script src="lib/js/angular/angular.js"></script>
<script src="lib/js/angular/angular-animate.js"></script>
<script src="lib/js/angular/angular-sanitize.js"></script>
<script src="lib/js/angular/angular-touch.js"></script>
<script src="lib/js/angular-ui/angular-ui-router.js"></script>
<script src="lib/js/ionic-angular.js"></script>

<script src="js/angular/angular-facebook.js"></script>

<!-- cordova -->
<script src="cordova.js"></script>

<!-- your app's script -->
<script src="js/angular/xeditable.js"></script>
<script src="js/angular/app.js"></script>
<script src="js/ionic.swipecards.js"></script>
<script src="js/angular/services.js"></script>
<script src="js/angular/controllers.js"></script>
<script src="js/global.js"></script>

	<ion-nav-bar type="bar-stable" 
			 animation="nav-title-slide-ios7" 
			 back-button-type="button-icon button-clear" 
			 back-button-icon="arrow-back" hide-nav-bar="true"></ion-nav-bar>

	<ion-nav-view hide-nav-bar="true"></ion-nav-view>
</div>
4

Why are you using jQuery’s click event handler?

Why not just use Angular’s ng-click ?

<button class="button" ng-click="alert('Hello')">Click Me!</button>
5

Tried that, but ng-click doesn’t seem to call a function in my external javascript file - only within angular. Not sure if I’m doing something wrong or this is normal behaviour?

I’m trying to keep my cosmetic JS separate from my Angular which is why I want to use jQuery onclick.

6

Which function on your external js file are you trying to call?

7

i do this
<button class="button" ng-click="alert('Hello')">Click Me!</button>

but the alert not work, and i got a warning

event.returnValue is deprecated. Please use the standard event.preventDefault() instead. ionic.bundle.js:1023
,why

8

Two things here.
I think the console error is a JQuery issue because of the implementation they make.

About ng-click I think you have to call a function defined in your $scope.
Or instead you should define an anonymous function and call alert inside of it.

9

As best I know, Angular does not evaluate expressions for external functions. Sorry about the bad info above.

As far back as 1.0.7, this did not work.

So, you need to use the controller to call alerts.

See : http://jsbin.com/venep/1/edit?html,js,console,output

With Ionic : http://jsbin.com/xibanu/2/edit?html,js,output