Javascript click function, how to avoid other links?

Question

I have the following javascript which turns a table row into a link:

$("tr[data-link]").click(function() {
  window.location = $(this).data("link")
})

Used for this table:

<tr data-link="<%= vendor_order_path(order) %>">
  <td class="center"><%= order.created_at %></td>
  ....
  <td class="center">
    <div class=""><%= order.fulfillment_status %>
      <a href="" class="form-show">Edit</a></div>
    <div class="form-hide">
    <%= form_for order do |f| %>
      <%= f.text_field :tracking_numbers %>
      <%= f.submit "Update Tracking" %>
    <% end %>
  </td>
</tr>

It works fine and how it's supposed to but my issue is the "Edit" for the form on the bottom can't be clicked without the above JS firing and linking to a new page...which uses this javascript:

$(document).on('turbolinks:load', function(){
  $('a.form-show').click(function(event){
    event.preventDefault();
    $(this).parent().next('div.form-hide').toggle();
  });
});

I can't click "Edit" without the other javascript link redirect happening.

How can I make it so when I press "Edit" the other javascript doesn't fire? Or somehow layer it down under the Edit?

I like the way it functions as I have the table highlight with the mouse pointer and allowing users to click to link_to the "show" page of the item they click.. But I also need the Edit to work as well.

What can i do?

https://stackoverflow.com/a/1369080/9285923 This is probably what you are looking for — Dustin Gogoll, Jun 28 '19 at 06:36

score -1 · Answer 1 · edited Jun 28 '19 at 08:09

-1

Try using

event.stopPropagation()

edited Jun 28 '19 at 08:09

BDL

21,052
22
49
55

answered Jun 28 '19 at 07:36

yashwanth kumar

65
3

Although this code might (or might not) solve the problem, a good answer should also explain **what** the problem is and **how** the code helps. – BDL Jun 28 '19 at 08:09
I tried using answers from the link Dustin Gogoli gave me and which that was one of them. Unfortunately, that didn't work. I'm not too seasoned with javascript but I believe that stops javascript links from firing at one time? If so, that's may not be the issue because other links are fine. The "Edit" is in the same row as the link of the other javscript link – uno Jun 28 '19 at 19:38

Javascript click function, how to avoid other links?

1 Answers1