CODEWITHSUNDEEP
javascriptjqueryember.js
user3568719
user3568719

Reputation: 1056

emberjs menu component bubbling

I have a menu component, which build a tree menu from an array. To toggle the sub menus I do:

  didInsertElement:function(){
    this.$('li.sub').click(function(e){
      $('ul', this).slideToggle();
    });
  }

I works fine as long as I click on 'Settings'. If I try to click one of the sub menus ex. 'Currency' It closes the parent menu item.

Here is a jsBin to demonstrate the problem: Click on 'Settings' -> then click one of the opened sub items:

http://emberjs.jsbin.com/bexivuhohu/6/edit

Upvotes: 1

Views: 72

Answers (1)

jmurphyau
jmurphyau

Reputation: 2309

The reason for that is the parent component is still handling the click - even when clicking on a child component.

I would recommend moving the click handling to the component, rather than jQuery - and returning false. If the child component returns false the parent component doesn't double handle the click.

click: function() {
  this.$('ul').slideToggle();
  return false;
}

See this working JSBin: http://emberjs.jsbin.com/bibeho/1/edit?html,js,output

Upvotes: 2

Related Questions