# jQuery document.ready callback **URL:** \ **Category:** Learning Team\ **Created:** [September 20, 2016, 2:49pm UTC](https://discuss.emberjs.com/t/jquery-document-ready-callback/11615 "2016-09-20T14:49:47Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![Demiurg](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/demiurg/32/12586_2.png) [@Demiurg](https://discuss.emberjs.com/u/Demiurg)\ **Post date:** [September 20, 2016, 2:49pm UTC](https://discuss.emberjs.com/t/jquery-document-ready-callback/11615/1 "2016-09-20T14:49:47Z")
Hi! I’m an Ember beginner and need some help. I have main template in app/templates/application.hbs And I need to add jQuery handler to one DOM element. What shall I do? ---
**Author:** ![Panman8201](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/panman8201/32/17727_2.png) [@Panman8201](https://discuss.emberjs.com/u/Panman8201)\ **Post date:** [September 20, 2016, 3:35pm UTC](https://discuss.emberjs.com/t/jquery-document-ready-callback/11615/2 "2016-09-20T15:35:28Z")
I would be cautious about how much jQuery you use in ember, it can be tough to get it right. In this case, are you looking for an “ember ready” type event? Or just when the application template was rendered? ---
**Author:** ![Demiurg](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/demiurg/32/12586_2.png) [@Demiurg](https://discuss.emberjs.com/u/Demiurg)\ **Post date:** [September 20, 2016, 6:43pm UTC](https://discuss.emberjs.com/t/jquery-document-ready-callback/11615/3 "2016-09-20T18:43:58Z")
Not sure about ‘Ember ready’, so I think ‘template rendered’ is more suitable in my case ---
**Author:** ![Panman8201](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/panman8201/32/17727_2.png) [@Panman8201](https://discuss.emberjs.com/u/Panman8201)\ **Post date:** [September 20, 2016, 7:24pm UTC](https://discuss.emberjs.com/t/jquery-document-ready-callback/11615/4 "2016-09-20T19:24:37Z")
Well, to explain both; Application `ready()` can be defined in the `app/app.js` file and is triggered: > when the Application has become ready, immediately before routing begins. The call will be delayed until the DOM has become ready. I use this method to hide a loading spinner while the app “boots”. Ex: ```js // ... ready: function() { Ember.$('#app-loading').hide(); } // ... ``` While others use the component [`didRender()` method](http://emberjs.com/api/classes/Ember.Component.html#method_didRender) or [`didInsertElement()` event](http://emberjs.com/api/classes/Ember.Component.html#event_didInsertElement) on a component in the `application.hbs` template. ```hbs {{!-- app/templates/application.hbs --}} {{app-loaded}} {{!-- ... --}} ``` ```js // app/components/app-loaded.js // ... didRender() { Ember.$('#app-loading').hide(); } // ... ``` Both would be triggered at a _similar_ time, but not exactly the same time. Do either of these fit your needs? ---
**Author:** ![Demiurg](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/demiurg/32/12586_2.png) [@Demiurg](https://discuss.emberjs.com/u/Demiurg)\ **Post date:** [September 21, 2016, 4:30am UTC](https://discuss.emberjs.com/t/jquery-document-ready-callback/11615/5 "2016-09-21T04:30:51Z")
Awesome! Thank you a lot! ---
**Author:** ![Demiurg](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/demiurg/32/12586_2.png) [@Demiurg](https://discuss.emberjs.com/u/Demiurg)\ **Post date:** [September 21, 2016, 8:06am UTC](https://discuss.emberjs.com/t/jquery-document-ready-callback/11615/6 "2016-09-21T08:06:43Z")
Well, now I have such output: ``` bash-3.2$ ember b app.js: line 16, col 9, '$' is not defined. 1 error ===== 1 JSHint Error Built project successfully. Stored in "dist/". ``` What I have done: ================= app/app.js ============== ``` App = Ember.Application.extend({ modulePrefix: config.modulePrefix, podModulePrefix: config.podModulePrefix, Resolver, ready: function() { Ember.$(".bookashko-logo4-bklens1").click( function() { $(this).toggleClass("bookashko-logo4-bklens2"); }); } }); ``` And code not working. ---
**Author:** ![Panman8201](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/panman8201/32/17727_2.png) [@Panman8201](https://discuss.emberjs.com/u/Panman8201)\ **Post date:** [September 21, 2016, 12:43pm UTC](https://discuss.emberjs.com/t/jquery-document-ready-callback/11615/7 "2016-09-21T12:43:57Z")
To fix the hint error you need to append `Ember.` to the second jQuery call. ```auto App = Ember.Application.extend({ modulePrefix: config.modulePrefix, podModulePrefix: config.podModulePrefix, Resolver, ready: function() { Ember.$(".bookashko-logo4-bklens1").click( function() { Ember.$(this).toggleClass("bookashko-logo4-bklens2"); }); } }); ``` Is this `.bookashko-logo4-bkklens1` available in the DOM at the time this runs? Eg: Is it within the `index.html` file? ---
**Author:** ![Demiurg](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/demiurg/32/12586_2.png) [@Demiurg](https://discuss.emberjs.com/u/Demiurg)\ **Post date:** [September 21, 2016, 1:55pm UTC](https://discuss.emberjs.com/t/jquery-document-ready-callback/11615/8 "2016-09-21T13:55:41Z")
Error fixed, thank you. Script not working. Element with noted class is in the templates/application.hbs ---
**Author:** ![Panman8201](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/panman8201/32/17727_2.png) [@Panman8201](https://discuss.emberjs.com/u/Panman8201)\ **Post date:** [September 21, 2016, 3:29pm UTC](https://discuss.emberjs.com/t/jquery-document-ready-callback/11615/9 "2016-09-21T15:29:19Z")
> [@Demiurg](#): > > Element with noted class is in the templates/application.hbs In that case, I’d suggest making the element in question an Ember Component. You can do more programmatically when it’s a component. > **[Customizing a Component's Element - Components - Ember Guides](https://guides.emberjs.com/v2.8.0/components/customizing-a-components-element/#toc_customizing-the-element-s-class)** > > By default, each component is backed by a element. If you were to look at a rendered component in your developer tools, you would see a DOM representation that looked something like: > > My Component ... Basic example of what you’re trying to achieve (at least what you’re describing); ```js // app/components/foo-bar.js import Ember from 'ember'; export default Ember.Component.extend({ classNameBindings : ['bookashko-logo4-bklens2'], 'bookashko-logo4-bklens2' : false, click() { this.toggleProperty('bookashko-logo4-bklens2'); } }); ``` ```hbs {{!-- app/templates/application.hbs --}} {{foo-bar}} ```