ember.js - Ember removes element from DOM after creating it, and jQuery can not find it -

i have wrapper around ember.select, activate select2 features:

app.select2selectview = ember.select.extend({     prompt: 'please select...',     classnames: ['input-xlarge'],      didinsertelement: function() {         ember.run.scheduleonce('afterrender', this, 'processchildelements');     },      processchildelements: function() {         this.$().select2({             // here configuration of             // select2 component             escapemarkup: function (m) { return m; } // not want escape markup since displaying html in results         });     },      willdestroyelement: function () {         this.$().select2('destroy');     }  }); 

sometimes need make drop-down invisible, , this:

{{#if cityvisible}}     <div class="control-group">         <label class="control-label">city</label>         <div class="controls">             {{view settingsapp.select2selectview                 id="city-id"                 contentbinding="currentcities"                 optionvaluepath="content.city"                 optionlabelpath="content.city"                 selectionbinding="controller.selectedcity"                 prompt="select city"}}             <i class="help-block">select city geographical number</i>         </div>     </div> {{/if}} 

but whenever drop-down invisible, following error:

uncaught typeerror: cannot call method 'select2' of undefined  

i guess element inserted, removed ember dom (bound property cityvisible), jquery not able find it?

what can avoid error message? not want make view visible/invisible, want keep whole control-group under cityvisible control.

this normal behaviuor ember removes view, workaround following:

html

<div {{bindattr class="view.cityvisible::hidecities"}}>   <div class="control-group">     ...   </div> </div> 

css

.hidecities {   display: none; } 

remove {{#if}} around html block, , wrap div instead on set css class contains display: none; use cityvisible or different property in view or controller , set true/false toggle it's visibility. mecanisnm should leave html markup in dom available jquery. note if citiesvisible property lives in controller remove view. prefix view.citiesvisible citiesvisible, depends on setup.

see demo here.

hope helps.