How to run a handler upon clicking on a hyperlink ?

nemcuon

Hi all,

I want to run a piece of javascript when the user clicks on a hyperlink, but I don't know how to do it.

My current (ugly) solution is to click to a cell instead, by using a 'rowCallback'

... 'rowCallback', function rowCallback(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
// Unbind first in order to avoid any duplicate handler (see https://github.com/l-lin/angular-datatables/issues/87)
$('td:eq(4)', nRow).unbind('click');
$('td:eq(4)', nRow).bind('click', function() {
$scope.$apply(function() {
// Call my handlerFunctionUponClick() here
});
});

Any help is welcome.

nemcuon

These are all the hints I have, but most of them would let the user reload the page with a different URL upon clicking on a hyperlink. I don't want that, I only want to run a piece of JavaScript.

Thanks,

---------------------------- Examples ---------------------
One example https://datatables.net//forums/discussion/34522

Another example https://datatables.net//forums/discussion/comment/69354/#Comment_69354

Another https://datatables.net//forums/discussion/comment/25895/#Comment_25895

Angular DataTables http://l-lin.github.io/angular-datatables/#/bindAngularDirective

Using columns.render
https://datatables.net//forums/discussion/comment/62109/#Comment_62109
https://datatables.net/reference/option/columns.render

Using rowCallBack, specified to the cell
http://l-lin.github.io/angular-datatables/#/rowClickEvent

Using createdRow
https://datatables.net/reference/option/createdRow

Using createdCell
https://datatables.net/reference/option/columns.createdCell

JSFiddle: Using deferRender with columns.render
http://stackoverflow.com/questions/30489307/make-column-data-as-hyperlink-datatable-jquery offer a clickable <a href>text</a> which means a reloading of the page with the content provided by "href" but does not offer (immediately) the <a onclick = "">

jr42.gordon

What is your desire for this link to do? Also, a link to a working example is preferred and would expedite providing you a solution.

nemcuon

This link should only make another table in the page visible, and load Ajax data onto that new table. To me it is easy to make another table visible and load data (using angular) but the clicking onto a hyperlink causes me an error.

How ca I provide example here ?

jr42.gordon

If you can, use http://live.datatables.net/ to try and mockup an example. But if I understand you correctly all you need is a proper event handler.

First assign a unique attribute to each tr

<tr data-elem="uniqueID1">
   <td><a href="#" class="ajax_row_link"></a></td>
</tr>

$(#tableId).on('click','a.ajax_row_link', function() {
   var $tr = $(this).closest('tr'),
          id = $tr.attr('data-elem');

   // display second table
   // obtain and load second table data using id
})