在JQuery中传递$(this)，用于删除表中的一行。

I have the following html code which represents a part of a table

我有下面的html代码，它代表了表的一部分。

<tr>
   <td>    
      <span class='tip'><a href='#' class='Delete' data-name='product1' title='Delete'><img src='images/icon/icon_delete.png'></a></span>"
   </td>
</tr>
<tr>
   <td>    
      <span class='tip'><a href='#' class='Delete' data-name='product2' title='Delete'><img src='images/icon/icon_delete.png'></a></span>"
   </td>
</tr>

and some JS

和一些JS

$(document).on('click', '.Delete', function () {
    var name = $(this).attr("data-name");
    $.confirm({
        'title': 'DELETE ROW',
        'message': "<strong>DO YOU WANT TO DELETE </strong><br /><font color=red>' " + name + " ' </font> ",
        'buttons': {
            'Yes': {
                'class': 'special',
                'action': function () {

                    // this is the problem
                    // i am trying to get the row
                    var row = $(this).closest("tr").get(0);

                    oTable.fnDeleteRow(row);

                }
            },
            'No': { 'class': '' }
        }
    });
});

I am trying to get the row id so i will be able to delete it. how can i pass the caller to the click event

我正在尝试获取行id，这样我就可以删除它。如何将调用者传递给单击事件?

EDIT: i am trying to delete a row, maybe there are other ways

编辑:我正在尝试删除一行，也许还有其他的方法。

2 个解决方案

#1

Your problem is that inside the $.confirm plugin's action callback function, the value of this is likely something else (i.e. not the DOM node). save a reference to $(this) before calling the plugin, and use that reference inside the action callback. something like:

你的问题是在$里面。确认插件的动作回调函数，它的值很可能是其他的(也就是说不是DOM节点)。在调用该插件之前，保存对$(this)的引用，并在动作回调中使用该引用。喜欢的东西:

$(document).on('click', '.Delete', function () {
    var node = $(this);
    var name = node.attr("data-name");
    $.confirm({
        'title': 'DELETE ROW',
        'message': "<strong>DO YOU WANT TO DELETE </strong><br /><font color=red>' " + name + " ' </font> ",
        'buttons': {
            'Yes': {
                'class': 'special',
                'action': function () {
                    var row = node.closest("tr").get(0);
                    oTable.fnDeleteRow(row);
                }
            },
            'No': { 'class': '' }
        }
    });
});

This is a bit of guess, since I'm not farmilar with your confirm plugin, but it's a common JS pitfall.

这是一个猜测，因为我不是你的确认插件的farmilar，但它是一个普通的JS陷阱。

#2

$(this).parent().parent().parent().remove(); should get rid of it.

(美元).parent().parent().parent().remove();应该去掉它。

#1

$(document).on('click', '.Delete', function () {
    var node = $(this);
    var name = node.attr("data-name");
    $.confirm({
        'title': 'DELETE ROW',
        'message': "<strong>DO YOU WANT TO DELETE </strong><br /><font color=red>' " + name + " ' </font> ",
        'buttons': {
            'Yes': {
                'class': 'special',
                'action': function () {
                    var row = node.closest("tr").get(0);
                    oTable.fnDeleteRow(row);
                }
            },
            'No': { 'class': '' }
        }
    });
});