CODEWITHSUNDEEP
twitter-bootstrapember.js
Ian Steffy
Ian Steffy

Reputation: 1234

Ember.js action won't play nice with data-toggle=dropdown

I have an action that takes up the entire row of a table. If the user clicks on that action, he is linked to the next page. However I have a data-toggle=dropdown that toggles a drop down.

My problem arises when I try to click that data-toggle=dropdown and instead/before the dropdown can toggle, I am linked to the next page. I don't want this. I want the link-to action to span across the entire row, but not conflict with any other buttons inside of that row. 

<tr {{action 'actionThatLinksToNextPage' this.someID bubbles=false}}>
  <td>
    <a  data-toggle="dropdown" aria-expanded="false" class="btn btn-sm pull-right btn-sm-big-glyph dropdown-toggle ">
      <div  class="glyphicon fa-lg glyphicon-remove fa-size " data-toggle="tooltip" data-placement="top" title="Disabled" role="tooltip" >              
      </div>                
    </a>
  </td>
  <td>
  </td>
</tr>

Upvotes: 1

Views: 392

Answers (1)

NicholasJohn16
NicholasJohn16

Reputation: 2409

The problem is that when you're clicking the dropdown toggle, the event is propagating up the DOM tree to the table row. You need to stop the bubbling before it reaches the tr so its action isn't triggered. Something like this should work:

$('a[data-toggle=dropdown]').click(function(event) {
   event.stopPropagation();
});

Upvotes: 2

Related Questions