I am currently working with a basic table layout, shown below:
<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>
This table is intended to display numerous rows of dynamic data. I have created a JavaScript method linked to a data-action attribute named delete_media. The goal is to retrieve the text value within the td tr.mediaTitle of the current row when clicking on a link with the class .fa-trash-o.
In my initial attempt using $(this), where I assume it refers to the clicked button and traverse up the DOM tree to find the relevant element, I encountered issues:
Blah.prototype._delete_media = function(data,e,el) {
var self = this,
mediaTitle = $(this).closest('tr').find('td.mediaTitle').text();
console.log(mediaTitle);
});
Unfortunately, this returned an undefined or empty value. It seemed that something was missing in my approach.
Subsequently, by wrapping the functionality in an .onClick event handler, I was able to obtain the desired text value:
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);
});
});
The utilization of a separate click function within the existing method connected to data-action felt confusing. I realize there might be a more efficient way to manipulate elements without adding additional handlers. Seeking assistance from those knowledgeable in jQuery to guide me towards resolving this dilemma. Any insights would be greatly appreciated.