[英]Click event being fired twice jQuery
I have some code here: 我在这里有一些代码:
$(document).on("click", ".updateRecordButton", function(event){
var rowid = $(this).parents("li").data("rowid");
$("#displayOptions").popup('open', { x: event.pageX, y: event.pageY });
$(document).on("click", ".deleteRecord", function(event){
deleteRecord(rowid);
});
});
and the deleteRecord function: 和deleteRecord函数:
function deleteRecord(rowid){
db.transaction(function(transaction) {
transaction.executeSql('DELETE FROM Table1 WHERE "Id" = "'+rowid+'"'
,nullHandler);
});
The first onclick is when I click the list element. 第一个onclick是当我单击列表元素时。 This prompts a popup with a delete button. 这会提示带有删除按钮的弹出窗口。 The second onclick is the delete button which then prompts the deleteRecord function. 第二个onclick是删除按钮,然后提示deleteRecord函数。 The problem is, the deleteRecord function seems to be firing twice after I have deleted one list element. 问题是,删除一个列表元素后,deleteRecord函数似乎被触发两次。 If I do an alert(rowid); 如果我做警报(行话); after deleting the first element, it gives me the id of the previous list element I deleted and the one I'm deleting now. 删除第一个元素后,它为我提供了我删除的上一个列表元素的ID,以及我现在要删除的列表元素的ID。
Can anyone tell me why it is firing twice? 谁能告诉我为什么它发射两次? I have done some research and tried preventDefault and preventPropagation but these don't seem to work. 我已经进行了一些研究,并尝试了preventDefault和preventPropagation,但是这些似乎不起作用。
When I delete a listitem it deletes the row that is associated with it from a table. 当我删除列表项时,它将从表中删除与之关联的行。 The listview is then emptied and the results are relisted. 然后清空列表视图,并重新列出结果。 Thing is, the event firing twice is also messing with that and for some reason the second list element I try to delete only deletes from the database but stays on the page and copies of the other list elements are produced. 事实是,触发两次的事件也使该问题变得混乱,并且由于某种原因,我尝试删除的第二个列表元素仅从数据库中删除,但停留在页面上,并生成了其他列表元素的副本。 I really don't know what's going on, any help would be appreciated. 我真的不知道发生了什么,任何帮助将不胜感激。
Incase it is needed, this is where the rowid data comes from: 如果需要,这是rowid数据来自的地方:
transaction.executeSql('SELECT * FROM Table1', [],
function(transaction, result) {
if (result != null && result.rows != null) {
for (var i = 0; i < result.rows.length; i++) {
var row = result.rows.item(i);
$('#records').append('<li data-rowid="' + row['Id'] + '"><a href ="#" class="updateRecordButton">'+ 'Test: ' + row['colum1'] + '</a></li>');
}
$("#records").listview("refresh");
}
},errorHandler);
},errorHandler,nullHandler);
Everytime you set the click handler it's adding one more to the event "bubble" thus the repeated calls. 每次设置点击处理程序时,都会向事件“气泡”中添加一个事件,从而重复调用。 A quick solution would be to use off()
to remove the previous handler. 一种快速的解决方案是使用off()
删除以前的处理程序。
$(document).on("click", ".updateRecordButton", function (event) {
var rowid = $(this).parents("li").data("rowid");
$("#displayOptions").popup('open', {
x: event.pageX,
y: event.pageY
});
$("#displayOptions .deleteRecord").off("click").on("click", function (event) {
deleteRecord(rowid);
});
});
A better solution would be to separate the events and set the rowid on the delete element: 更好的解决方案是分离事件并在delete元素上设置rowid:
$(document).on("click", ".updateRecordButton", function (event) {
var rowid = $(this).parents("li").data("rowid");
$("#displayOptions").popup('open', {
x: event.pageX,
y: event.pageY
});
$("#displayOptions .deleteRecord").data("rowid", rowid);
});
$(document).on("click", ".deleteRecord", function(event){
var rowid = $(this).data("rowid");
deleteRecord(rowid);
});
Try this. 尝试这个。
Split up your event handlers. 拆分事件处理程序。 Use a global variable or if this is all wrapped in a function a private variable to store the rowid to use in the second event handler. 使用全局变量,或者如果所有都包装在函数中,则使用私有变量来存储要在第二个事件处理程序中使用的rowid。 It will work fine for you. 它会为您工作正常。 You can optionally null the rowid in the second event handler also. 您还可以选择在第二个事件处理程序中使rowid无效。 Check out the fiddle 查看小提琴
http://jsfiddle.net/Y4gLK/ http://jsfiddle.net/Y4gLK/
var rowid; //Global Variable to allow the rowid to pass between the two event handlers.
$(document).on("click", ".updateRecordButton", function(event){
//set global variable rowid
rowid = $(this).parents("li").data("rowid");
$("#displayOptions").popup('open', { x: event.pageX, y: event.pageY });
});
$(document).on("click", ".deleteRecord", function(event){
//use global variable rowid's value as a parameter to deleteRecord function
deleteRecord(rowid);
//optionally you can delete rowid here!
return false;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.