javascript - knockout.js doesn't fire click event when click description in loop

Question

I have next model code

<!-- ko foreach: {data: userAdminView.viewRoles, as: 'rrole'} -->
  <tr>                                                    
    <td class="userRolesRoleTitle"><b data-bind="text: rrole.role.name"></b><br/><i data-bind="text: rrole.role.description"></i></td>                                
    <td class="userRolesRoleGroups">
      <!-- ko foreach: {data: rrole.role.groups, as: 'group'} -->
      <div class="usersGroupElement" data-bind="html: group.viewName"></div>
      <!-- /ko -->
      <a class="btn emb green" data-bind="click: userAdminView.addNewGroup,visible:(rrole.role.isNewGroupAccessible) , attr: { value: rrole }"><i class="icon16 plus"></i>add</a>
    </td>
  </tr>
<!-- /ko -->

and model event

function userAdminView(user) {
  //some code 
  self.addNewGroup = function(data, event){};
  //some code 
}

all working fine but except userAdminView.addNewGroup event, it never fired when described in loop. Why does it happens ? Thanks

Answer 1

change this part data-bind="click: userAdminView.addNewGroup"

into this data-bind="click: $parent.addNewGroup"

check this out custom-bindings-controlling-descendant-bindings

Bindings such as with and foreach create extra levels in the binding context hierarchy. This means that their descendants can access data at outer levels by using $parent, $parents, $root, or $parentContext.