WordPress块无法在管理员中正确运行jQuery

时间:2020-11-05 17:30:04

标签: javascript jquery wordpress flickity

在下面的代码中,我试图使用jQuery(outlined here)设置Flickity幻灯片显示功能。

该代码在前端可以正常工作,但在Wordpress后端则无法工作,我希望它可以用于块预览。

但是,在注释的代码中,您会注意到它是通过Vanilla JS启动的,它工作正常吗?

有人可以识别出这里出什么问题吗?是WP管理员的怪癖吗?

// Concat Dependencies
import jQueryBridget from 'jquery-bridget';
import Flickity from 'flickity';
import imagesloaded from 'flickity-imagesloaded';

// Set Flickity as a jQuery plugin
Flickity.setJQuery( $ );
jQueryBridget( 'flickity', Flickity, $ );

jQuery(document).ready(function($){
    
  // Setup functionality
  var initializeBlock = function( block ) {
        
        // Vars
        var carousel = block.find('.carousel');
        var cells = block.find('.carousel-cell');

        // THIS WORKS
        //  var carousel = new Flickity('.carousel', {
        //     cellSelector: '.carousel-cell',
        //      cellAlign: 'left',
        //      imagesLoaded: true,
        //      lazyLoad: false,
        //      freeScroll: true,
        //      contain: true,
        //      groupCells: false,
        //      prevNextButtons: false,
        //      pageDots: false
        //  });
        // }

        // THIS DOESN'T WORK
        carousel.flickity({
            cellSelector: '.carousel-cell',
            cellAlign: 'left',
            imagesLoaded: true,
            lazyLoad: false,
            freeScroll: true,
            contain: true,
            groupCells: false,
            prevNextButtons: false,
            pageDots: true
        });
  };

  // Initialize each block on page load (front-end)
  $(document).ready(function(){
    $('.custom-block.masthead').each(function(){
            initializeBlock( $(this) );
    });
  });

  // Initialize dynamic block preview (back-end).
  if( window.acf ) {
        window.acf.addAction( 'render_block_preview', initializeBlock );
  }

});

0 个答案:

没有答案