Search code examples
javascriptjqueryember.jsmaterialize

Can't access dom element with jQuery in an Ember action

I use materialize for my UI and have a simple switch

 <div class="switch">
  <label>
    Off
    <input id="right-{{item.id}}" type="checkbox" {{action "changeRightForRole" item}}>
    <span class="lever"></span>
    On
  </label>
</div>

In my Ember action I get the corresponding model (the item). I have to do several things in my action, but it looks like the action cancels the default animation of the switch, so I want to set it manually like this.

actions: {
  changeRightForRole(params) {
    let selector = '#right-'+params.get('id');
    console.log(selector);
    Ember.$(selector).prop('checked', true);
    Ember.$('#right-3').prop('checked', true);
  }
}

The first way, where I set the prop dynamically doesn't work. The second does work.
Any ideas how to fix this?

Solution

  • try 

    <input id="right-{{item.id}}" type="checkbox" {{action "changeRightForRole" item preventDefault=false}}>