javascript jQuery 单击事件不适用于 AngularJS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30332945/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery click events not working with AngularJS
提问by Marty.H
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.
我正在将我的多页 php + jquery 网站转换为单页 angular 应用程序。然而，我已经用 jquery 编写了很多代码，所以只打算在路由等方面将 php 换成 angular。
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.
我遇到的一个我无法弄清楚的问题是，在转换停止工作之前，我一直在使用 jquery 单击事件。如果更改代码以使其从 ng-click 中触发，它将起作用，如果我从控制台调用该函数也是如此。jquery 正在工作，我在提到的函数中放了一些 jquery，它工作正常。
<!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:
主要.js：
var mainApp = angular.module('myApp', ['firebase', 'headerPage']);
mainApp.directive('headerPage', function(){
return{
restrict: 'E',
templateUrl: 'html/header.html'
}
});
header.js
头文件.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");
});
回答by PSL
The reason is because, when you bind the event to the element #myElementthe 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-clickitself on the element (Which you already said you have tried out).
原因是，当您将事件绑定到元素时，#myElement该元素还不存在。由于该元素作为指令模板的一部分呈现，因此您需要将绑定处理程序移动到指令链接函数内。好吧，从技术上讲，您可以使用事件委托来解决问题，但这只是一次又一次的黑客攻击。最好的办法是ng-click在元素上使用它自己（你已经说过你已经尝试过了）。
回答by UsainBloot
Try using ng-click instead https://docs.angularjs.org/api/ng/directive/ngClick
尝试使用 ng-click 代替https://docs.angularjs.org/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.
我知道这并不能真正解决 jQuery 的问题，但它有助于将代码全部保留在一个框架下。
回答by Shehryar Abbasi
alternatively: if you want to stick with jquery..you may be able to make use of jquery's event delegation:
for example:
HTML
或者：如果您想坚持使用jquery.. 您可以使用jquery 的事件委托：
例如：
HTML
<div id="parent">
<a href="#" class="child">Click Here</a>
</div>
JS:
JS：
$('#parent').on('click', '.child', function() {
console.log("click");
});
EDIT: added fiddle fwiw: https://jsfiddle.net/ge59sbtp/
编辑：添加小提琴 fwiw：https://jsfiddle.net/ge59sbtp/
