Bootstrap Event Listener not working anywhere?

I am using the FieldsBuilder to create a handful of components. One of them is a carousel. Any custom JS that went with it, I was going to enqueue only when this blade template is called but that threw an error. So now I am trying something like this:

@php($uuid = wp_generate_uuid4())

<div class="container">
  <div id="{{ $uuid }}" class="carousel slide multi-item-carousel" data-ride="carousel" data-interval="3000">
    <div class="carousel-inner row w-100 mx-auto" role="listbox">
      @php($first = true)
      @while(have_rows('logos')) @php(the_row())
        <div class="carousel-item col-sm-4{{ $first ? ' active' : '' }}">
          <img class="img-fluid mx-auto d-block" src="{{ get_sub_field('logo')['url'] }}">
        </div>
        @php($first = false)
      @endwhile
    </div>
  </div>

<script>
  jQuery(document).ready(function() {
    jQuery( '{{ "#"  . $uuid }}' ).on('slide.bs.carousel', function(e) {
      console.log('slide'); // THIS IS NEVER CALLED
    });
  });

</script>

This is not working either. How do I get this line to execute? console.log('slide'); // THIS IS NEVER CALLED

Or better yet, what’s the best way to include conditional jquery code?

I have also tried created a route called ‘pageTemplateDefault.js’. This gets executed fine, but not the carousel event.

export default () => {
  // scripts here run on the DOM load event
  console.log('This is a page with the default template.');
  // scripts here fire after init() runs
  jQuery( '.multi-item-carousel' ).on('slide.bs.carousel', function() {
    console.log('slide');
  });
};

BS 4.X is included in sage 10, yes? The carousel starts scrolling just fine on it’s own, just not capturing the event for whatever reason. (Default dependencies still in place)

/**
 * External Dependencies
 */
import 'jquery';
import 'bootstrap';
import { router } from 'js-dom-router';

So this is strange. Even though it shows the bootstrap JS included in my app.js, I get this error.

TypeError: jQuery(...).carousel is not a function

It works fine when I include BS as an external file. I can only imagine when included in the yarn build, the library is processed inside an eval statement which is why I am not capturing triggered events.

This topic was automatically closed after 42 days. New replies are no longer allowed.