Question

我正在为WPBakery Page Builder插件创建自定义滑块元素，因为内置轮播不适合我的目的。

一切正常，除了我更新元素设置时，滑块消失了，因为通过删除旧的HTML在DOM中重新创建了元素。

这是元素代码：

<?php
class WPBakery_Custom_Slider {
    /**
     * Setup class
     */
    public function __construct() {
        // Actions.
        add_action( 'vc_before_init', array( $this, 'custom_mapping' ) );

        // Shortcodes.
        add_shortcode( 'wpbakery_custom_slider', array( $this, 'shortcode' ) );
    }

    /**
     * Custom Mapping
     */
    public function custom_mapping() {
        vc_map( array(
            'name'             => __( 'Custom Slider', 'text-domain' ),
            'base'             => 'wpbakery_custom_slider',
            'description'      => __( 'The Custom Slider.', 'text-domain' ),
            'category'         => __( 'Content', 'text-domain' ),
            'icon'             => 'icon-wpb-carousel',
            'front_enqueue_js' => get_theme_file_uri( 'assets/js/wpbakery-page-builder.js' ),
            'params'           => array(
                ...
            ),
        ) );
    }

    /**
     * The element HTML
     *
     * @param array $atts Shortcode attributes.
     * @return string
     */
    public function shortcode( $atts ) {
        // Params extraction.
        ...

        ob_start();
        ?>

        <div class="text-domain-wpb-custom-slider-wrapper">
            <div class="text-domain-wpb-custom-slider">
                ...
            </div>
        </div>

        <?php
        $html = ob_get_clean();

        return $html;
    }
}

这是wpbakery-page-builder.js文件：

vc.events.on( 'shortcodes:wpbakery_custom_slider:update', function ( model ) {
    jQuery( document ).find( '.text-domain-wpb-custom-slider' ).customSlider();
} );

但是当事件运行时，似乎.text-domain-wpb-custom-slider不存在。我尝试过的变体是：

vc.events.on( 'shortcodes:wpbakery_custom_slider:update', function ( model ) {
    jQuery( '.text-domain-wpb-custom-slider', document ).customSlider();
} );

和

vc.events.on( 'shortcodes:wpbakery_custom_slider:update', function ( model ) {
    setTimeout( function () {
        jQuery( '.text-domain-wpb-custom-slider', document ).customSlider();
    }, 1000 );
} );

以上所有，保存元素的设置都会导致：

Uncaught TypeError: jQuery(...).customSlider is not a function

因为jQuery( '.text-domain-wpb-custom-slider', document ).length为零，即使DOM中有.text-domain-wpb-custom-slider。

关于如何为WPBakery Page Builder / Visual Composer正确更新基于JavaScript的自定义元素的任何想法？

Answer 1

问题是document变量的范围。它指的是Builder编辑页面，而不是需要编辑的页面（WPBakery称为model）。

所以这是解决方案，使用model.view.el而不是document来引用页面：

vc.events.on( 'shortcodes:wpbakery_custom_slider:update', function ( model ) {
    setTimeout( function () {
        jQuery( model.view.el ).find( '.text-domain-wpb-custom-slider' ).customSlider();
    }, 1000 );
} );

在设置更新上更新自定义滑块

1 个答案: