Can't access property due to wrong generic name (jQuery)

Question

I need to use the old owl carousel which is based on jQuery. Changing a setting during runtime worked like so in the past:

$('.owl-carousel').data('owl.carousel').options.nav = false;
$('.owl-carousel').trigger( 'refresh.owl.carousel' );

But for $('.owl-carousel').data('owl.carousel') the console outputs undefined as you can see at my codepen. That seems to happen as there is no owl.carousel. Instead there are only two generic jQuery224029705171181195xxxx where one of them contains owl.carousel. As the number is generic I can't really access it. Did browsers change the way they name generic properties/objects or did they implement some sort of layer in between?

https://codepen.io/helloworldstudios/pen/mdzwNxZ

Kind regards, Fabian

Answer 1

Diagnosis

The reason .data('owl.carousel'); returns undefined for you is because the data has not yet been populated from the Owl Carousel library into the element data yet.

When the .owlCarousel() method is invoked, this line is fired:

data = new Owl(this, typeof option == 'object' && option);

This calls the function constructor, which calls this method:

this.initialize();

Which then triggers the initialized event:

this.trigger('initialized');

Then, your custom onInitialized callback is called.

However, only after your onInitialized callback has been called is when the .data() is populated in $.fn.owlCarousel():

$this.data('owl.carousel', data);

Solution

Try accessing the .data() after the .owlCarousel() method call in a separate expression afterwards, so that the .data() has been populated from the .owlCarousel() call:

console.clear();
var owl = "test";
$(document).ready(function () {
  owl = $(".owl-carousel");
  owl.owlCarousel({
    items: 4,
    loop: true,
    nav: true,
    margin: 10,
    speed: 400,
    autoplay: true,
    autoplayTimeout: 5000,
    autoplaySpeed: 5000,
    autoplayHoverPause: true,
    slideTransition: "linear",
  });
  console.log($('.owl-carousel').data('owl.carousel'));
});

.item{
  height:200px;
  background-color: red;
}

body{
  height:4000px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="owl-carousel owl-theme owl-default">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>

Otherwise, you could use this to get the current Owl object that the initialized event is for:

console.clear();
var owl = "test";
$(document).ready(function () {
  owl = $(".owl-carousel");
  owl.owlCarousel({
    items: 4,
    loop: true,
    nav: true,
    margin: 10,
    speed: 400,
    autoplay: true,
    autoplayTimeout: 5000,
    autoplaySpeed: 5000,
    autoplayHoverPause: true,
    slideTransition: "linear",
    onInitialized() {
      console.log(this);
    },
  });
});

.item{
  height:200px;
  background-color: red;
}

body{
  height:4000px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="owl-carousel owl-theme owl-default">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>