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

问题描述

在下面的代码中，我试图使用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 );
  }

});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）