# Canjs 3.2.1 can-component inserted event

**URL:** <https://forums.bitovi.com/t/canjs-3-2-1-can-component-inserted-event/491>\
**Category:** CanJS\
**Created:** [December 4, 2016, 8:17pm UTC](https://forums.bitovi.com/t/canjs-3-2-1-can-component-inserted-event/491 "2016-12-04T20:17:09Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nothing\_New](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/nothing_new/32/206_2.png) [@Nothing\_New](https://forums.bitovi.com/u/Nothing_New)\
**Post date:** [December 4, 2016, 8:17pm UTC](https://forums.bitovi.com/t/canjs-3-2-1-can-component-inserted-event/491/1 "2016-12-04T20:17:09Z")

</div>

I am wondering on how to get the inserted event so that I can manipulate the element with jQuery once the component is loaded.

Thanks!

---

<div class="post-metadata">

**Author:** ![Nothing\_New](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/nothing_new/32/206_2.png) [@Nothing\_New](https://forums.bitovi.com/u/Nothing_New)\
**Post date:** [December 4, 2016, 8:19pm UTC](https://forums.bitovi.com/t/canjs-3-2-1-can-component-inserted-event/491/2 "2016-12-04T20:19:19Z")

</div>

Nevermind, that has not changed from 2.\*

```
var AuthLogin = Component({
    tag: 'page-auth-login',
    view: loginTemplate,
    ViewModel: AuthLoginViewModel,
    events: {
        inserted: function(){
            console.log( 3333 );
        }
    }
});

```

Sorry for the post I don’t think I can delete it.

---

<div class="post-metadata">

**Author:** ![phillipskevin](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/phillipskevin/32/102_2.png) [@phillipskevin](https://forums.bitovi.com/u/phillipskevin)\
**Post date:** [December 5, 2016, 4:34pm UTC](https://forums.bitovi.com/t/canjs-3-2-1-can-component-inserted-event/491/3 "2016-12-05T16:34:23Z")

</div>

The only difference is that the `inserted` and `removed` events are now asynchronous in Can 3.x. Check out the section **Asynchronous inserted/removed events** on [the migration guide](http://canjs.com/doc/migrate-3.html).

---

<div class="post-metadata">

**Author:** ![Nothing\_New](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/nothing_new/32/206_2.png) [@Nothing\_New](https://forums.bitovi.com/u/Nothing_New)\
**Post date:** [December 7, 2016, 2:07am UTC](https://forums.bitovi.com/t/canjs-3-2-1-can-component-inserted-event/491/4 "2016-12-07T02:07:39Z")

</div>

Thanks for the heads up!

I have an **{{#if init\_loaded}}** _wrapped around the whole template_, that is default to false. In the init event I am using a model to get some data, and then once the data is loaded I set the init\_loaded variable to true,

I have to call **taskGroupTemplate();** before jQuery can find an element, inside the {{#if init\_loaded}}. Otherwise the element that jQuery is looking for never exists because the template is not processed and re-rendered yet.

Is this proper?

**taskGroupTemplate** is the view, imported via StealJs. It is used as the main view for the Component.

```
inserted: function( element ){
            this.viewModel.on('init_loaded', function(ev, newVal, oldVal) {
                if( newVal ) {
                    taskGroupTemplate();
                    console.log( $( this.element ).find( '.someitem' ) );
                }
            }.bind( this ));
        }

```

Thanks!

---

<div class="post-metadata">

**Author:** ![phillipskevin](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/phillipskevin/32/102_2.png) [@phillipskevin](https://forums.bitovi.com/u/phillipskevin)\
**Post date:** [December 8, 2016, 4:07pm UTC](https://forums.bitovi.com/t/canjs-3-2-1-can-component-inserted-event/491/5 "2016-12-08T16:07:22Z")

</div>

The code above is what you’re using to work around the issue, is that correct?

It would be helpful to see what the code looked like when it was not working. If you could create a JSBin that would be the easiest way to debug, but posting the non-working code here would work also.

---

<div class="post-metadata">

**Author:** ![Nothing\_New](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/nothing_new/32/206_2.png) [@Nothing\_New](https://forums.bitovi.com/u/Nothing_New)\
**Post date:** [December 9, 2016, 8:10pm UTC](https://forums.bitovi.com/t/canjs-3-2-1-can-component-inserted-event/491/6 "2016-12-09T20:10:00Z")

</div>

Yeah, it is what I am using to get around the issue.

Here is the JSbin:  
http://jsbin.com/jujonil/17/embed?js,console,output

You can see that the **console.log( this.element.querySelector( ‘#test’ ) );** returns null if the **MyComponentTemplate();** function is not called.

**setTimeout** is to simulate an ajax call.

```
var MyMap = can.DefineMap.extend('MyMap', {
  init_loaded: {
    value: false
  },
});

var MyComponentTemplate = can.stache( '{{#if init_loaded}}<div id="test">test element</div>{{/if}}' );

var MyComponent = can.Component.extend({
    tag: 'my-component',
    viewModel: MyMap,
    view: MyComponentTemplate,
    events: {
      init: function(){
        //this.viewModel.init_loaded = true;
        setTimeout(function(){
          this.viewModel.init_loaded = true;
        }.bind( this ), 2000);
      },
      inserted: function( element ){
        if( this.viewModel.init_loaded ) {
          //console.log( this.element.getElementById( 'test' ).style.color = "red" );
          //console.log( this.element.querySelector( '#test' ) );
        }
        this.viewModel.on( 'init_loaded', function( ev, newVal, oldVal ){
          if( newVal ) {
              //MyComponentTemplate();
              console.log( this.element.querySelector( '#test' ) );
          }
        }.bind( this ));
      }
    }
});

var MyRender = can.stache( '<my-component/>' );
var fragment = MyRender( )
document.body.appendChild(fragment)

```

I must be missing something.

Thanks!

---

<div class="post-metadata">

**Author:** ![phillipskevin](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/phillipskevin/32/102_2.png) [@phillipskevin](https://forums.bitovi.com/u/phillipskevin)\
**Post date:** [December 12, 2016, 4:59pm UTC](https://forums.bitovi.com/t/canjs-3-2-1-can-component-inserted-event/491/7 "2016-12-12T16:59:13Z")

</div>

Ok, I see what you’re saying now. When `init_loaded` changes, this handler

```auto
this.viewModel.on( 'init_loaded', function( ev, newVal, oldVal ){ ... });

```

is triggered before stache rerenders and adds your `#test` element to the DOM. Calling `MyComponentTemplate();` just adds a delay so that the DOM can be updated before running your code.

There are a couple options I can think of for fixing this.

### 1. Use a `setTimeout` around your code within the handler

```auto
        this.viewModel.on( 'init_loaded', function( ev, newVal, oldVal ){
          if( newVal ) {
            setTimeout(function() {
              console.log( this.element.querySelector( '#test' ) );
            }.bind(this));  
          }
        }.bind( this ));

```

This will allow the template to be rendered before that `querySelector` runs, but makes the code more confusing and less testable.

### 2. You can add an `($inserted)` handler to the `#test` element directly, so your template will look something like:

```auto
{{#if init_loaded}}
    <div id="test" ($inserted)="testInserted(%element)">test element</div>
{{/if}}

```

### 3. The best solution is probably to make your `<div id="test">` element its own component so you can handle the code in the `inserted` handler of that component.

---

<div class="post-metadata">

**Author:** ![Nothing\_New](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/nothing_new/32/206_2.png) [@Nothing\_New](https://forums.bitovi.com/u/Nothing_New)\
**Post date:** [December 12, 2016, 9:09pm UTC](https://forums.bitovi.com/t/canjs-3-2-1-can-component-inserted-event/491/8 "2016-12-12T21:09:35Z")

</div>

Thanks, I’ll probably go with #2 since it is the easiest to implement.

---

<div class="post-metadata">

**Author:** ![Nothing\_New](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/nothing_new/32/206_2.png) [@Nothing\_New](https://forums.bitovi.com/u/Nothing_New)\
**Post date:** [December 13, 2016, 4:58am UTC](https://forums.bitovi.com/t/canjs-3-2-1-can-component-inserted-event/491/9 "2016-12-13T04:58:18Z")

</div>

I just tried it, and it works perfectly!