Owlcarousel2: .on('initialized.owl.carousel') and .on('initialize.owl.carousel') not working

[odahcam]

The 'initialized' event is not being triggered on .owl-carousel element.

• this.trigger('initialized') called on carousel startup (Owl.prototype.initialize) is working.
• this._handlers['initialized.owl.carousel'] (line 1806) is being executed on carousel startup. This is located inside AutoRefresh Plugin.

// this._handlers['initialized.owl.carousel']
this._handlers = {
      'initialized.owl.carousel': $.proxy(function(e) {
        if (e.namespace && this._core.settings.autoRefresh) {
          this.watch();
        }
      }, this)
    };

• Owl.prototype.trigger is receiving the 'initialized' parameter from startup trigger.
• Event register order and names:
  
  
  
  1. change.owl.carousel
  
  
  2. changed.owl.carousel
  
  
  3. initialize.owl.carousel
  
  
  4. prepare.owl.carousel
  
  
  5. prepared.owl.carousel
  
  
  6. refresh.owl.carousel
  
  
  7. refreshed.owl.carousel
  
  
  8. initialized.owl.carousel
  
  

So, why onInitialized works while .on('initialized.owl.carousel') don't?

Pen used to test/debug the code: http://codepen.io/odahcam/pen/OXgWqg?editors=0010

[joaoalves89]

I had the same issue but there is a note at http://www.owlcarousel.owlgraphic.com/demos/events.html (overview section) saying:

Notice that initialize.owl.carousel and initialized.owl.carousel events must be attached before Owl Carousel initialization. This is required only for those two.

elem.on('initialize.owl.carousel', function(event) {});
elem.on('initialized.owl.carousel', function(event) {});

elem.owlCarousel(options);

[Drex-luthor]

@joaoalves89 wait so is there a fix? or a temporary fix for at least one of the sliders?

[odahcam]

Stills with no fix, use the @joaoalves89 approach for now.

The problem is that owl initializes before the event registration, a way to solve this is trigger the event after its registration, but this "fix" needs to be discussed.

[odahcam]

I think the correct behavior is console.warn() some message in the browser's console if event handlers that will not be triggered were found.

• .on('initialize... should run only when the initilizing stuff happens.
• .on('initialized... should run on initialization finish or instantly if the carousel has already initialized, where the carousel could keep a control flag with the initialization status (initialized: (true || false)) and do the specific logic when an 'initialized' event registration happens.

Once this is not a bug or error, nothing in the code needs to change, but for helping developers, a warning about the useless event listenner registration would be nice.

[cupcakedream]

Please add this caveat to the docs. It took me a half hour to find this thread - I've never seen an initialization event work like this.

https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html

[tin7117]

I think the listen function must be registered before owlCarousel() , below is the correct code:
var owl = $('.owl-carousel'); // Listen to owl events: owl.on('initialized.owl.carousel', function(event) { ... }); owl.owlCarousel();

[davy440]

After spending a good deal of time on it, the final conclusion I have reached on is not to use initialize.owl.carousel as an event listener. instead, use it as a callback onInitialize. Works perfectly for me!