Javascript 不使用onClick从div类返回表行td项

我有一个简单的表格，如下所示：

<table>
    <tbody>
        <tr>
           <td>img</td>
           <td class="mediaTitle"><span class="media_title">Media Name Title</span></td>
           <td>type</td>
           <td>2017-08-30 10:30am</td>
           <td>2017-09-01 11:34am</td>
           <td>Smith, Tater</td>
           <td><i class="fa fa-arrow-circle-down action" data-action="download_media" title="Download Media" aria-hidden="true"></i></td>
           <td><i class="fa fa-refresh action" data-action="restore_media" title="Restore Media" aria-hidden="true"></i></td>
           <td><i class="fa fa-trash-o action" data-action="delete_media" title="Permanently Delete Media" aria-hidden="true"></i></td>
        </tr>
   </tbody>
</table>

返回的值未定义或为空。不是我要找的

但是，当我将其包装在一个

.onClick

中时，我就能够根据需要获得

.text（）

值：

Blah.prototype._delete_media = function(data,e,el) {
        var self = this;

        $('.fa-trash-o').click(function() {
            var mediaTitle = $(this).closest('tr').find('td.mediaTitle').text();

        console.log(mediaTitle);
        });
});

嗯。令人困惑

现在，显然在已经绑定到

数据操作的方法中使用
.onClick
函数是没有意义的。据我所知，我在第一个/所需的方法中没有正确使用
$（this）
。我在这里遗漏了一些东西，希望比我更聪明的人帮助我找到jQuery学习中遗漏的部分。任何帮助都将不胜感激。
更新
将
$（this）
更改为
$（e.target）
。在演示中，我添加了另一行，然后对文本进行编号以区分它们


您不必过多地遍历DOM，可以直接使用选择器
td.mediaTitle

演示

$（'.fa-trash-o'）。在（'click'，函数（e）上{
var mediatetitle=$（e.target）.closest（'tr'）.find（'td.mediatetitle'）.text（）；
console.log（mediaTitle）；
});

img
媒体名称标题1
类型
2017-08-30上午10:30
2017-09-01 11:34上午
史密斯，塔特
img
媒体名称标题2
类型
2017-08-30上午10:30
2017-09-01 11:34上午
史密斯，塔特
更新
将
$（this）
更改为
$（e.target）
。在演示中，我添加了另一行，然后对文本进行编号以区分它们


您不必过多地遍历DOM，可以直接使用选择器
td.mediaTitle

演示

$（'.fa-trash-o'）。在（'click'，函数（e）上{
var mediatetitle=$（e.target）.closest（'tr'）.find（'td.mediatetitle'）.text（）；
console.log（mediaTitle）；
});

img
媒体名称标题1
类型
2017-08-30上午10:30
2017-09-01 11:34上午
史密斯，塔特
img
媒体名称标题2
类型
2017-08-30上午10:30
2017-09-01 11:34上午
史密斯，塔特
以下是一种方法，您可以将这些内容包装到一个简单的插件中。仅单击事件被委托给表本身，以说明将来动态添加的行

每个
[数据操作]
都有自己的
操作方法
。
每行使用与每个媒体项相关的数据属性

用法：
$（“#我的表”）.mediaActions（）

因为您不太可能同时拥有多个实例，所以我不认为使用proptotype继承有什么大的优势。所有命名函数都将在封装插件的IIFE内隔离


（函数（$）{
//对底部功能的提升参考
var actionMethods={
“还原\u媒体”：还原\u媒体，
“删除媒体”：删除媒体，
“下载媒体”：下载媒体
};
$.fn.mediaActions=函数（选项）{
//返回此值以允许jQuery链接
返回此值。每个（函数（）{
//将clcik侦听器委托给具有“[data action]”目标的表
$（此）。在（'单击'，'数据操作'）上，函数（e）{
var$el=$（此），
$row=$el.closest（'tr'），
action=$el.data（'action'），
媒体数据=$row.data（）；
//此操作的调用方法传递当前行和行数据
//TODO:确保当前操作的方法存在
actionMethods[action]（$row，媒体数据）；
});
})
}
功能还原\媒体（$row，媒体\数据）{
//以某种方式验证它首先需要恢复
console.log（'恢复'，媒体数据）；
$row.removeClass（'deleted'）；
}
功能删除媒体（$row，媒体数据）{
console.log（'删除'，媒体数据）；
$row.addClass（'deleted'）；
}
功能下载\媒体（$row，媒体\数据）{
console.log（“下载”，媒体数据）；
}
})（jQuery）；
$（“#我的表”）.mediaActions（）
tr.deleted{
背景：#ccc
}

img
媒体名称标题
类型
2017-08-30上午10:30
2017-09-01 11:34上午
史密斯，塔特
img
媒体2
类型
2017-08-30上午10:30
2017-09-01 11:34上午
富，酒吧
以下是一种方法，您可以将这些内容包装到一个简单的插件中。仅单击事件被委托给表本身，以说明将来动态添加的行

每个
[数据操作]
都有自己的
操作方法
。
每行使用与每个媒体项相关的数据属性

用法：
$（“#我的表”）.mediaActions（）

因为您不太可能同时拥有多个实例，所以我不认为使用proptotype继承有什么大的优势。所有命名函数都将在封装插件的IIFE内隔离


（函数（$）{
//对底部功能的提升参考
var actionMethods={
“还原\u媒体”：还原\u媒体，
“删除媒体”：删除媒体，
“下载媒体”：下载媒体
};
$.fn.mediaActions=函数（选项）{
//返回此值以允许jQuery链接
返回此值。每个（函数（）{
//将clcik侦听器委托给具有“[data action]”目标的表
$（此）。在（'单击'，'数据操作'）上，函数（e）{
var$el=$（此），
$row=$el.closest（'tr'），
action=$el.data（'action'），
媒体数据=$row.data（）；
//此操作的调用方法传递当前行和行数据
//到
Blah.prototype._delete_media = function(data,e,el) {
        var self = this;

        $('.fa-trash-o').click(function() {
            var mediaTitle = $(this).closest('tr').find('td.mediaTitle').text();

        console.log(mediaTitle);
        });
});