jQuery DataTables row highlighting
<p>Using jQuery DataTables, I am using the below code to highlight a selected row:</p>

<pre><code> var table = $('#example1').DataTable();        
 $('#example1 tbody').on('click', 'tr', function()
 {
   if($(this).hasClass('selected')){
     $(this).removeClass('selected');
   }
   else{
     table.$('tr.selected').removeClass('selected');
     $(this).addClass('selected');
   }
 });
</code></pre>

<p>I also have this in-page CSS class at the top of the page:</p>

<pre><code> &lt;style&gt;
   tr.selected {background-color: #a6a6a6;}
 &lt;/style&gt;
</code></pre>

<p>All of the above works accordingly.  I can click anywhere on the row, and the row will be highlighted.</p>

<p>However, I have encountered a problem.  In each row, there are links that the user can click on to open a modal window.  If the user clicks directly on the link, the modal opens and the row is indeed highlighted.</p>

<p>The problem occurs if the user clicks the row first, then within the same row, clicks the link to open the window...now the row is no longer highlighted.</p>

<p>What I need to do is keep the highlight on the row no matter how many times they click the same row - until they click a different row.</p>

<p>How can I adjust the jQuery above to make this happen?</p>