每次點擊都會再次調用自定義函數
[英]Custom function gets called once more at every click
問題描述
我是 Angular JS 的新手，我已經建立了一個帶有項目表的基本 HTML 頁面。 我希望能夠分別刪除每個項目，因此我為 HTML 表格的每一行添加了一個包含刪除按鈕的列。 這就是這個專欄的樣子。
<td headers="deleteRoleHeader" class="cell-texte">
<span class="glyphicon glyphicon-trash" ng-click="deleteRole();"></span>
</td>
還有我的 Angular JS 函數：
$scope.deleteRole = function(){
var data = {
codeRole: $scope.code_role,
descRole : $scope.desc_role
};
console.log(data);
};
我的問題是每次單擊刪除按鈕時，我的函數都會比上一次調用一次。 澄清：第一次單擊時，函數被調用一次，第二次單擊時，函數被調用兩次，依此類推。
我希望我的函數在我點擊刪除按鈕時只被調用一次。
有沒有人遇到過類似的問題？ 我已經閱讀了很多關於函數被多次調用的 stackoverflow 問題，但我無法解決我的問題。
在此先感謝您的幫助。
編輯：這是我點擊兩次后的控制台輸出
編輯 2：我想出了是什么導致了問題：我設置了一個模式，作為確認，如果我刪除它，我的代碼就會像它應該的那樣運行（只對函數進行一次調用）這是一個重現的小提琴問題： https : //jsfiddle.net/w6edum0f/12/ 。
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.roles = [
{
"codeRole": "test",
"descRole": "test desc"
},
{"codeRole": "test2",
"descRole": "test desc1"
}
];
$scope.selectRole = function(role) {
$scope.code_role = role.codeRole;
$scope.desc_role = role.descRole;
};
$scope.deleteRole = function(){
$('#deleteModal').show();
$('#deleteBtn').click(function(){
$('#deleteModal').hide();
var data = {
codeRole: $scope.code_role,
descRole : $scope.desc_role
};
console.log(data);
});
};
});
2 個解決方案
解決方案1
2 已采納 2019-04-30 20:59:02
第一次點擊，函數被調用一次，第二次我點擊，函數被調用兩次，依此類推。
發生這種情況是因為代碼在每次調用時都添加了另一個點擊處理程序：
錯誤
$scope.deleteRole = function(){ $('#deleteModal').show(); $('#deleteBtn').click(function(){ $('#deleteModal').hide(); var data = { codeRole: $scope.code_role, descRole : $scope.desc_role }; console.log(data); }); };
一種解決方案是刪除調用后的點擊處理程序：
$scope.deleteRole = function(){
$('#deleteModal').show();
$('#deleteBtn').on("click", hideModal);
};
function hideModal(){
$('#deleteModal').hide();
$('#deleteBtn').off("click", hideModal);
var data = {
codeRole: $scope.code_role,
descRole : $scope.desc_role
};
console.log(data);
};
解決方案2
0 2019-04-30 19:07:35
好的，伙計們，我嘗試制作一個小型 Angular 應用程序並嘗試運行相同的代碼，以便我們處於相同的上下文中：
鏈接到 jsfiddle https://jsfiddle.net/dupinderdhiman/nd8wm5pg/1/
原因：原因是鼓泡，當我們點擊okay從對話框，單擊其中后打開按鈕delete ，然后開始冒泡，因此處理bubling，我試試下面的訣竅，你可以嘗試另一種，如果你想：P
$scope.deleteRole = function(){
$('#deleteModal').show();
var isDeleteBtnClicked = false;
$('#deleteBtn').click(function($event){
if(!isDeleteBtnClicked)
{
$('#deleteModal').hide();
var data = {
codeRole: $scope.code_role,
descRole : $scope.desc_role
};
console.log(data);
isDeleteBtnClicked = true;
}
});
};
以下是正在運行的代碼片段：
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <body> <div ng-app="myApp" ng-controller="myCtrl"> <table> <thead> <tr>deleteRole <th><span>Code</span> </th> <th><span>Description</span> </th> <th> Suppression </th> </tr> </thead> <tbody> <div> <div> <tr ng-repeat="role in roles" ng-click="selectRole(role);"> <td>{{ role.codeRole }}</td> <td>{{ role.descRole }}</td> <td> <span title="Supprimer le rôle" ng-click="deleteRole();">Delete</span> </td> </tr> </div> </div> </tbody> </table> <div id="deleteModal" class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title">Confirmation</h1> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>Voulez-vous supprimer l'élément ?</p> </div> <div class="modal-footer"> <button type="button" id="deleteBtn" class="btn btn-primary">Supprimer</button> <button type="button" id="cancelDeleteBtn" class="btn btn-secondary" data-dismiss="modal">Fermer</button> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.roles = [ { "codeRole": "test", "descRole": "test desc" }, {"codeRole": "test2", "descRole": "test desc1" } ]; $scope.selectRole = function(role) { $scope.code_role = role.codeRole; $scope.desc_role = role.descRole; }; $scope.deleteRole = function(){ $('#deleteModal').show(); var isDeleteBtnClicked = false; $('#deleteBtn').click(function($event){ if(!isDeleteBtnClicked) { $('#deleteModal').hide(); var data = { codeRole: $scope.code_role, descRole : $scope.desc_role }; console.log(data); isDeleteBtnClicked = true; } }); }; }); </script> </body> </html>如果仍有疑問，請告訴我
Jquery 點擊 function 只被調用一次
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.