Question

Possible Duplicate:
Prevent execution of parent event handler

I’m using a nice plug-in (jQuery drop-down) to add a drop down to a table row:

An attribute is placed on a trigger object that contains the ID of a menu to display. In this case “data-dropdown” on a table row.

<tr data-dropdown="#dropdown-first">
  <td><a href="http://www.boston.com">Basic</a></td>
  <td>The basic plan</td>
</tr>

My issue is one of the TDs contains a link but the link will always trigger the drop down rather than launch a new page. This is a snippet of the plug-in code that calls the menu:

$(function () {
    $('BODY').on('click.dropdown', '[data-dropdown]', showMenu);
    $('HTML').on('click.dropdown', hideDropdowns);
});

Is there a way to modify the selector in the .on event to exclude a specific child tag such as my link ?
Is there another suggested strategy? I’d like to keep the plug-in intact as possible so its highly re-usable.

Answer 1

The problem is you are putting the data-dropdown attribute on the row. Clicking on anything within that row will trigger the event, and the logic inside showMenu does not even check if it shouldn’t proceed once anything has been clicked.

Does the entire row have to cause the dropdown? If not, place the data-dropdown on something within the row.

Otherwise, modify the jquery.dropdown.js and add this at line 41, before the event.preventDefault() line:

if (trigger != event.target && $(event.target).hasClass('dropdown-ignore')) return;

Then add the class ‘dropdown-ignore’ to your boston.com link.