CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Josep Vidal
Josep Vidal

Reputation: 2671

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

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.

Upvotes: 0

Views: 33

Answers (1)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

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>

Upvotes: 1

Related Questions