how to exclude a specific child element from trigger

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.

score 1 · Accepted Answer · answered Oct 18 '12 at 19:05

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.

answered Oct 18 '12 at 19:05

noel

2,095
14
14

Its not necessary to have the whole row clickable (I could add a sibling icon or link to get the drop-down) but its nice to have the large target for the user. I'll try the second option which makes sense and maintains/improves the flexibility of the plug-in...Thanks! – eggs Oct 18 '12 at 19:20
Since I worked it out, I submitted a pull request to the plugin author, claviska. They may include the code and make it 'official.' – noel Oct 18 '12 at 19:27
Perfect: added your line and this: $("table.menutable a").addClass('dropdown-ignore'); great idea on pinging the author. I think this is a useful addition. – eggs Oct 18 '12 at 19:28

score 0 · Answer 2 · answered Oct 18 '12 at 18:46

0

You can try to unbind all click events associated with the that holds the (after the plugin is instantiated)

HTML

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

JAVASCRIPT

$('.disable-dropdown').unbind('click');

answered Oct 18 '12 at 18:46

Reza Assar

209
1
6

This would disable the drop down in more cases than just the cell that contains the a tag right? Perhaps: $('tr.disable-dropdown td a').unbind('click'); ?? – eggs Oct 18 '12 at 19:02

how to exclude a specific child element from trigger

2 Answers2