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 parents元素。但是，如果我使用' parents‘关键字，则传递'a.deleteBtn’将选择所有行，并将删除最后一条记录；如果访问parents元素，则将删除第一条记录。我的delete方法(Delete是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();                

        });
    },

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

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按钮上的点击事件，不要在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
},