Jquery Help - OnClick send Title to Clipboard

Question

I am new to JavaScript/jQuery.

I have the below lines as part of a table I am dynamically creating from a DB Query. My End goal is a jQuery function that when the span is clicked will send the contents of the title attribute of that span to the Clipboard, but so far I can't even seem to find the value, all I am getting is undefined when I click on any of the span/columns.

<tr>
    <td id="1AVIFilePath"><span style='color:Red;' onClick='copyToClipboard()' title='c:/FTP/DASales/Working/File/EVENT/1E03029B20160107101053001i100.avi' >False</span></td>
    <td id="1AVISuccess"><span style='color:Red;' onClick='copyToClipboard()' title='C:/TOS3/1E03029B20160107101053001i100.mp4'>False</span></td>
    <td id="1AVICopy"><span style='color:Red;' onClick='copyToClipboard()' title='E:/OriginalAvis/1E03029B20160107101053001i100.avi'>False</span></td>
    <td id="1AVIFail"><span style='color:Red;' onClick='copyToClipboard()' title='F:/AVIFailed/1E03029B20160107101053001i100.avi'>False</span></td>
    <td id="1AVIS3Loc"><span style='color:Red;' onClick='copyToClipboard()' title='s3://PathTo/File/1E03029B20160107101053001i100.avi'>False</span></td>
    <td id="1MP4S3Loc"><span style='color:Red;' onClick='copyToClipboard()' title='s3://PathTo/File/1E03029B20160107101053001i100.mp4'>False</span></td>
<tr>

<script>
    function copyToClipboard() {
        var str = $(this).attr('title');
        console.log(str);
    }
</script

You can refer to this http://stackoverflow.com/q/22581345/3580410 — Sachin, Jan 16 '16 at 00:20

score 0 · Answer 1 · answered Jan 16 '16 at 00:43

You need to remove the onClick attribute from your span tags and set up an event listener as shown below. Note: you need a selector for the jQuery on method so I also added a class name (here called "clickable", but could be anything) to the table row element.

More information about the jQuery on method can be found here:

http://api.jquery.com/on/

function copyToClipboard() {
    var str = $(this).attr('title');
    console.log(str);
}

$(document).ready(function () {
    $('.clickable').on('click', 'span', copyToClipboard);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr class="clickable">
        <td id="1AVIFilePath"><span style='color:Red;' title='c:/FTP/DASales/Working/File/EVENT/1E03029B20160107101053001i100.avi' >False</span></td>
        <td id="1AVISuccess"><span style='color:Red;' title='C:/TOS3/1E03029B20160107101053001i100.mp4'>False</span></td>
        <td id="1AVICopy"><span style='color:Red;' title='E:/OriginalAvis/1E03029B20160107101053001i100.avi'>False</span></td>
        <td id="1AVIFail"><span style='color:Red;' title='F:/AVIFailed/1E03029B20160107101053001i100.avi'>False</span></td>
        <td id="1AVIS3Loc"><span style='color:Red;' title='s3://PathTo/File/1E03029B20160107101053001i100.avi'>False</span></td>
        <td id="1MP4S3Loc"><span style='color:Red;' title='s3://PathTo/File/1E03029B20160107101053001i100.mp4'>False</span></td>
    <tr>
</table>

Jquery Help - OnClick send Title to Clipboard

1 Answers1