bootbox 给 DOM 选择带来麻烦

Question

我想使用更好的确认对话框，所以我决定使用 bootbox，但是，它让我很难选择对我来说非常重要的父母元素。以前，我的 onclick 函数参数是“this”，但是，我必须在使用 bootbox 之后将其删除，因为“this”会返回 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) 的参数，然后它会返回相应的 'a' 标记，我可以访问相关行的 'id' 并会将 id（此处为 pid）传递给 ajax 调用以进行删除操作。

但是，现在我不能包含“this”关键字，因为它会返回 bootbox 父元素。但是传递'a.deleteBtn'将选择所有行，如果我使用'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();                

        });
    },

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

Answer 1

尝试在.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() 而不是使用.parents()。这样可以确保它会给最接近的tr，而不是层次结构中遇到的所有父母。

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