Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
998 views
in Technique[技术] by (71.8m points)

javascript - jQuery click events not working with AngularJS

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 come 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.com/ajax/libs/angularjs/1.3.11/angular.js"></script>
  <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
  <script src="https://cdn.firebase.com/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");
});
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

The 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).


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...