Prevent row-level link upon cancelling column-level link

Question

I have a table...

<table class="data-table">
  <thead>
    <tr>
      <th width="16">ID</th>
      <th>Name</th>
      <th>Reference</th>
      <th>Link</th>
      <th>YouTube</th>
      <th>Status</th>
      <th width="16">Delete</th>
    </tr>
  </thead>
  <tbody>
    <tr class="clickable" data-href="/videos/1/">
      <td>1</td>
      <td>Test Video</td>
      <td></td>
      <td></td>
      <td></td>
      <td>
        <a href="/videos/delete/1" 
           onclick="return confirm_delete();">
          Delete
        </a>
      </td>
    </tr>
  </tbody>
</table>

And the script is...

<script>
  function confirm_delete() {
    var result = confirm("Are you sure you want to delete this video?");
    return result;
  }
</script>

Clicking the row takes to the correct URL. Clicking the Delete link asks for confirmation. If I select OK, it takes to the correct delete URL, but if I select Cancel, it cancels the delete URL but takes to the row-level URL. How can I prevent that?

http://stackoverflow.com/questions/387736/how-to-stop-event-propagation-with-inline-onclick-attribute — Vladimir Lagunov, Nov 07 '13 at 03:43
The problem is the event propagation from the anchor element, prevent it using `event.stopPropagation()` see http://jsfiddle.net/arunpjohny/874dt/2/ — Arun P Johny, Nov 07 '13 at 03:43

score 0 · Answer 1 · answered Nov 07 '13 at 03:45

<a href="/videos/delete/1"
  onclick="event.stopPropogation(); return confirm_delete();">Delete</a>

However, do yourself a favor and put your javascript in a script tag.

<a id="delete_1" href="/videos/delete/1">Delete</a>
...
<script>
    $('#delete_1').click(function(e) {
        e.stopPropogation();
        return confirm("Are you sure you want to delete this video?");
    });
</script>

score 0 · Accepted Answer · answered Nov 07 '13 at 05:43

With thanks to all who commented/answered. I did the following to fix the problem.

First I removed the onclick attribute and added a class to the a tag.

<td><a class="delete" href="/videos/delete/1">Delete</a></td>

Then I did the following script.

<script>
  $(document).ready(function() {
    $('a.delete').click(function(event) {
      var result = confirm("Are you sure you want to delete this video?");

      if (!result) {
        event.preventDefault();
        event.stopPropagation();
      }
    });
  });
</script>

Prevent row-level link upon cancelling column-level link

2 Answers2