# Component "didInsertElement" only get fired first time

**URL:** <https://discuss.emberjs.com/t/component-didinsertelement-only-get-fired-first-time/11053>\
**Category:** Uncategorized\
**Created:** [July 1, 2016, 6:40pm UTC](https://discuss.emberjs.com/t/component-didinsertelement-only-get-fired-first-time/11053 "2016-07-01T18:40:07Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![niconel](https://avatars.discourse-cdn.com/v4/letter/n/e480ec/32.png) [@niconel](https://discuss.emberjs.com/u/niconel)\
**Post date:** [July 1, 2016, 6:40pm UTC](https://discuss.emberjs.com/t/component-didinsertelement-only-get-fired-first-time/11053/1 "2016-07-01T18:40:07Z")

</div>

First off, thanks so much for all the help so far. Really got me off the ground and making some progress.

Ok, so I have a component to render a select list to which I pass a “selectedId” value. In the “didInsertElement” event I fire a function (with Ember.run.later) to initiallize the select2 plugin.

All works great, but I have a problem where I have a list of records (say mysite/things/) and when you click on one, I load a form to edit that item in the “outlet” (say mysite/things/2/edit). Works great except it seems when the form load for the second time (like when you select a new record) the component does not seem to get initialized again and the selected value stays the same.

I placed an alert in the “didInserrtElement” event and it only gets called the first time the edit templated are loaded.

Does hope that make sense? Not sure if I should bother you guys with a bunch of code rather?

PS: For what it matter, if I use that component several times on the same template (form) it works as expected.

---

<div class="post-metadata">

**Author:** ![jmimi](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jmimi/32/11507_2.png) [@jmimi](https://discuss.emberjs.com/u/jmimi)\
**Post date:** [July 1, 2016, 8:49pm UTC](https://discuss.emberjs.com/t/component-didinsertelement-only-get-fired-first-time/11053/2 "2016-07-01T20:49:57Z")

</div>

`didInsertElement` called once when inserted in DOM. So any change to that doesn’t trigger that hook. Maybe `didReceiveAttrs` hook is good for you.

Take a look at [component lifecycle](https://guides.emberjs.com/v2.6.0/components/the-component-lifecycle/)

---

<div class="post-metadata">

**Author:** ![niconel](https://avatars.discourse-cdn.com/v4/letter/n/e480ec/32.png) [@niconel](https://discuss.emberjs.com/u/niconel)\
**Post date:** [July 2, 2016, 10:27am UTC](https://discuss.emberjs.com/t/component-didinsertelement-only-get-fired-first-time/11053/3 "2016-07-02T10:27:47Z")

</div>

![](https://us1.discourse-cdn.com/flex019/uploads/emberjs_public/original/2X/6/616b00eb086ec8fbde81033397b637fa4b7fa745.png)