[英]Jquery click event with popup
i have following code and its not working properly,basically i am willing to add popup on my click event for confirm delete but when i click deleting the row first and then apppear popup,i am stuck and coudn't understand whats going,here is my code 我有下面的代码,它不能正常工作,基本上我愿意在我的click事件上添加弹出窗口以确认删除,但是当我先单击删除行然后出现弹出窗口时,我被卡住了,无法理解正在发生什么,这是我的代码
$.fn.matrix.deleteCategory = function ( jqObj ) {
jqObj.find("#award").on('click', ".categoryminus", function () {
var CategoryClass = $(this).closest('tr').attr('class'); // table row Class
//split all class of current table row
var CategoryArray = CategoryClass.split(' ');
//delete all rows having class like C-1-o-1
var categoryClassLike = '[class^=' + CategoryArray[0] + '-o-]';
//for rTenderDocument,check delete c-2,c-3 and appear popup
if ( formType == 'rTenderDocument') {
if ( CategoryArray[0] == 'C-2' ){
$('#priceConfirm').bPopup();
$('.priceConfirm').click(function(){
if($(this).attr('id') == 'priceDeleteNo'){
$('#priceConfirm').bPopup().close();
return false;
} else {
$('#priceConfirm').bPopup().close();
return true;
}
});
} else if ( CategoryArray[0] == 'C-3' ){
$('#fixedAnnualConfirm').bPopup();
$('.fixedAnnualConfirm').click(function(){
if($(this).attr('id') == 'fixedAnnualDeleteNo'){
$('#fixedAnnualConfirm').bPopup().close();
return false;
} else {
$('#fixedAnnualConfirm').bPopup().close();
return true;
}
});
}
}
//remove all child of sub category
$( categoryClassLike ).each(function(){
var obj = $(this);
var subCategoryClass = obj.closest('tr').attr('class'); // table row Class
//split all class of current table row
var subCategoryArray = subCategoryClass.split(' ');
//delete all rows having class like C-1-o-3-So-1
var classLike = '[class^=' + subCategoryArray[0] + '-So-]';
//remove all child of sub category
$( classLike ).each(function(){
$(this).remove();
});
//remove sub category
obj.remove();
});
//after removing child then delete their parent
$(this).closest('tr').remove();
});
return jqObj;
};
I'm not sure what your code does - but I'll give you another approach to do what you want (based on tables and popup confirmation) 我不确定您的代码会做什么-但我会给您另一种方法来执行您想要的操作(基于表格和弹出窗口确认)
Take a look at this fiddle: JSFiddle Demo 看看这个小提琴: JSFiddle演示
I have created a basic table with rows that contains a del button: 我创建了一个基本表,其中的行包含一个del按钮:
<table>
<tr><td>ID</td><td>NAME</td><td>ACTION</td></tr>
<tr>
<td><div>1</div></td>
<td><div>Booba</div></td>
<td><div><button class='del'>Delete</button></div></td>
</tr>
<tr>
<td><div>2</div></td>
<td><div>Johnas</div></td>
<td><div><button class='del'>Delete</button></div></td>
</tr>
<tr>
<td><div>3</div></td>
<td><div>Coolio</div></td>
<td><div><button class='del'>Delete</button></div></td>
</tr>
</table>
Added a popup container with the message,buttons and hide it: 添加了带有消息,按钮的弹出式容器并将其隐藏:
<div class='popup' id='popup' style='display:none'>
<div>
<p>Please confirm the delete action</p>
<button id='confirm'>Proceed</button>
<button id='cancel'>Cancel</button>
</div>
</div>
Now for the Magic part ~ as yo can see i'm using a variable to store the row I wish to delete before the popup is displayed and only when the "proceed" button is clicked this element is removed (otherwise variable is reset and popup removed): 现在对于魔术部分〜如您所见,我正在使用变量存储要在弹出窗口显示之前删除的行,并且仅在单击“继续”按钮时才删除此元素(否则将重置变量并弹出窗口删除):
$(function(){
//element to delete:
var ele_del;
// Expose popup message when del button clicked:
$('button.del').click(function(){
event.preventDefault();
$('#popup').fadeIn('slow');
ele_del = $(this).closest('tr');
return false;
});
//delete if proceed clicked:
$('button#confirm').click(function(){
event.preventDefault();
$('#popup').fadeOut('slow',function(){
$(ele_del).find('div').each(function(){
$(this).slideUp('slow',function(){
$(ele_del).remove();
ele_del = "";
});
});
});
return false;
});
//cancel delete operation:
$('button#cancel').click(function(){
event.preventDefault();
$('#popup').fadeOut('slow',function(){
ele_del = "";
});
return false;
});
});
Notes: 笔记:
Have fun! 玩得开心!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.