Checkbox not available to check.. help!

Ember Data
1

Hello again!

i have a problem… i cant check my checkbox … after click on it, nothing happens… but i dont know why… anyone an idea??

{{#each friend in friends_list}}
    <a {{bind-attr title=friend.name}} {{action "toggleFavourite" friend}}>
        <p class="friendname">{{friend.name}}</p>
         {{input type="checkbox" name="isFavourite" checked=friend.favourite}}
         <img {{bind-attr src=friend.picture}} />
         <p class="friendId">Level {{friend.u_id}}</p>
     </a>
{{/each}}

but if i click the a-tag, img-tag or p-tag the checkbox will be checked… :frowning:

nice ragards Avi

3

The problem is that you have a click action registered on the <a> tag, so clicking on the checkbox will toggle the favourite through it’s own handlers, then the event is propagated up to the parent <a> tag which then toggles it back again.

You have two options:

  1. Create a non-propagating {{checkbox}} input and use that (see issue here https://github.com/emberjs/ember.js/issues/2989)
  2. Re-structure your code so that you are not nesting elements with click handlers
4

thanks for your answer lookingsideways

the first option i dont really understand… :confused: can you explain me what’s a non-propagating input? and the second is not possible for my code…

5

This is the example provided in the JSBin from the linked github issue:

App.ExtendedCheckbox = Em.Checkbox.extend({
    click: function(event) {
        event.stopPropagation();
        this.$().parent().click();
    }
});

Obviously this is in the old global-style and would need updating for modern Ember but I hope it illustrates the necessary workaround - replace your {{input type="checkbox"}} component with a similar component that stops the click event from propagating to parent inputs the same as you would with normal jQuery.

6

For anyone looking for this issue, it was resolved almost one year ago. You just need to add preventDefault=false property to the parent action.

1 Like