Make a link usable inside row with a jquery trigger on the <TR>

Question

I have a table, in the ROWS ( elements) I have a class that triggers a modal popup via jquery.

So if you click in any element in the table the modal pops up.

The problem im trying to solve here is: That in a column I have the name of the person/s, and that name is a link to the profile of this person/s, but when I click the name of the person, the modal pop ups and so, the href/link does not work.

Is there any clean solution with just html/css (Like z-index, or position, or maybe element position)? Or I will have to use js/jquery to solve it?

Simple example:

<tr class="popup-trigger">
 <td> title </td>
 <td> <a href="XXX"> Person </a> </td>
</tr>

Thanks in advance.

Answer 1

On click of the anchor, the event bubles up to the tr .

So give the anchors a class and use .stopPropagation() like this:

 $(".popup-trigger").on("click",function(){ console.log("Opening modal."); }); $(".table_anchor").on("click",function(e){ e.stopPropagation(); console.log("Link click... Not opening modal."); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr class="popup-trigger"> <td> Title (triggers modal) </td> <td> <a class="table_anchor" href="#"> Person name (not triggering modal) </a> </td> </tr> </table>