Question

Here’s the page:
http://nm-bootstrap.gydev.com/course-delivery.php

Both the chevron toggle icons and the bookmark icons on the title rows are prepended to the first th. I have some js in place to toggle the following rows if a tr with th is clicked.

The problem is that I need to exclude that bookmark (an <a> with a class of “bookmark-this”) from the event, since someone needs to be able to bookmark and entire section without toggling the rows below. So the entire row EXCEPT the bookmark should trigger the event.

Here is the jQuery making it work

$("#table-modules tbody tr:not(.section-title)").hide();

$("#table-modules tbody tr.section-title").click(function(){
    $(this).nextUntil('tr.section-title').toggle().end()
        .find('.icon-chevron-right').toggle().end()
        .find('.icon-chevron-down').toggle();
});

$(".bookmark-this").click(function(){
    $(this).find('.icon-bookmark-empty').toggle().end()
        .find('.icon-bookmark').toggle();
});

and here are the first 2 rows of rendered html

<tr class="section-title" style="cursor: pointer; ">
<th><i class="icon-chevron-right grayLight"></i><i class="icon-chevron-down grayLight" style="display: none; "></i><a class="bookmark-this"><i class="icon-bookmark-empty grayLight"></i><i class="icon-bookmark red" style="display: none; "></i></a>1. Introduction</th>
<th>&nbsp;</th>
<th>11:53</th>
</tr>
<tr style="display: none; ">
<td style="padding-left: 45px; "><a class="bookmark-this"><i class="icon-bookmark-empty grayLight"></i><i class="icon-bookmark red" style="display: none; "></i></a><a href="#">How to take an online course</a></td>
<td><img src="/img/icons/check-sm.png" width="16" height="13" alt="yes"></td>
<td>6:32</td>
</tr>

How would I go about this?

Answer 1

Try adding stopPropagation to the click handler of .bookmark-this

$(".bookmark-this").click(function(e){ e.stopPropagation() });