bootbox 给 DOM 选择带来麻烦

Question

我想使用更好的确认对话框，所以我决定使用 bootbox，但是，它给我带来了麻烦 selecting parents element 这对我来说非常重要。以前，我的 onclick 函数参数是 'this'，但是，在使用 bootbox 之后我必须删除它，因为 'this' 会 return bootbox 生成我不需要的动态父项。我的 onclick 函数是：

<tr class="live" closestmatch="" matcheswith="" pid="267915" xtid="">
<td tag="_ACTIONS">
<div class=""> 
<ul class="dropdown-menu" aria-labelledby="dLabel-267915">
    <li>
       <a class="deletebtn" onclick="bootbox.confirm('Delete the record?', function (result) { if (result) { xlist.Delete('a.deletebtn'); }});">
                <span class="glyphicon glyphicon-trash"></span> Delete row
            </a>
    </li>

以前，在使用 bootbox 之前，我曾经将 'this' 作为我的 javascript 函数 xlist.Delete(this) 的参数，然后 return 相应的 'a' 标签，我可以访问相关行的 'id' 并将 id（此处为 pid）传递给 ajax 调用以进行删除操作。

但是，现在我不能包含 'this' 关键字，因为它会包含 return bootbox parents 元素。但是传递 'a.deleteBtn' 将 select 所有行，如果我使用 'parents' 关键字将删除最后一条记录，如果我在访问父元素时使用 'closest' 关键字则删除第一条记录。我的删除方法（删除是xlist的一部分）：

    Delete: function(ele) {
    var row = $(ele).parents('tr'); 
    var pid = row.attr('pid');
    $.post('DeleteRow?pid=' + pid + '&datatype=' + $('#DataType').val(), function (data, text, xhr) {
            $('tr.live[pid=' + data + ']').remove();                

        });
    },

如何select 我正在删除的行？我考虑过添加一个 class f。例如，每当我从下拉列表中选择 'delete' 选项时 'selected' 但这会将 'selected' class 添加到所有行。在这方面的任何帮助将不胜感激，如果我遗漏了什么，请随时询问。

Answer 1

尝试在 class .deletebtn 上绑定 click 事件，例如，

<tr class="live" closestmatch="" matcheswith="" pid="267915" xtid="">
<td tag="_ACTIONS">
<div class=""> 
<ul class="dropdown-menu" aria-labelledby="dLabel-267915">
    <li>
       <a class="deletebtn">
          <span class="glyphicon glyphicon-trash"></span> Delete row
       </a>
    </li>
....

使用.on()在删除按钮上绑定点击事件，不要在Delete函数中传递所有a.deletebtn，只需要传递当前点击的锚元素，如

$('.deletebtn').on('click',function(e){
    e.preventDefault();
    vat that = this;
    bootbox.confirm('Delete the record?', function (result) { 
       if (result) {
           xlist.Delete(that); // pass 'that' instead of passing all 'a.deletebtn'
       }
    });
});

还有一件事，在Delete函数中使用.closest() instead of using .parents()。这样可以肯定它会给出最接近的tr而不是层次结构中遇到的所有parents。

Delete: function(ele) {
   var row = $(ele).closest('tr');  // use closest in place of parents here
   var pid = row.attr('pid');
   // bla bla bla
},

bootbox 给 DOM 选择带来麻烦

bootbox giving DOM selection trouble

javascript

jquery

dom

bootbox