gpt4 book ai didi

javascript - Jquery 点击事件与弹出窗口

转载 作者:行者123 更新时间:2023-11-28 08:31:33 25 4
gpt4 key购买 nike

我有以下代码,它无法正常工作,基本上我愿意在我的点击事件上添加弹出窗口以确认删除,但是当我单击先删除行然后出现弹出窗口时,我被卡住了,无法理解发生了什么,这是我的代码

$.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;
};

最佳答案

我不确定你的代码是做什么的 - 但我会给你另一个做你想做的事情的方法(基于表格和弹出确认)

看看这个 fiddle :JSFiddle Demo

我创建了一个基本表,其中包含包含删除按钮的行:

<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>

添加了一个带有消息、按钮的弹出容器并隐藏它:

<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>

现在是魔术部分〜正如你所看到的,我正在使用一个变量来存储我希望在显示弹出窗口之前并且仅在“继续”按钮时删除行单击此元素将被删除(否则变量将被重置并弹出窗口将被删除):

$(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;
});
});

注释:

  1. 我在 TD 内使用“DIV ”来制作跨浏览器的幻灯片效果。有些浏览器不会直接向上滑动 TR。
  2. 整个脚本基于效果回调函数 - 如果您不想使用效果,可以删除 div 并直接删除 TR。
  3. 如果您使用动态表(行是动态添加的,并非全部都出现在 DOM 上),只需使用“.on('click' ” 而不是我使用的 .click() 。

玩得开心!

关于javascript - Jquery 点击事件与弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21800535/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com