php - Can't find elemnts on the DOM using Custom Control in Customizer API

admin管理员组

文章数量:1126299

I'am creating a Custom Control on Customizer API, I add Multiple Checkbox as my custom type.

When I wanna add a live preview, the jQuery doesn't find the selector that I want.

Here's functions.php code:

function dziri_customizer_settings( $wp_customize ) { 
    $wp_customize->add_panel( 'dziri_home_panel', array(
        'title'  => __( 'Home', 'dziri' ),
        'priority'   => 10
        ) 
    );

    $wp_customize->add_section( 'dziri_home_products' , array(
        'title'      => __( 'Home Page Products Tabs', 'dziri' ),
        'priority'   => 70,
        'panel'      => 'dziri_home_panel'
        ) 
    );

    $wp_customize->add_setting( 'home_products' , array(
        'default'     => array('new-arrivals', 'featured-products', 'onsale-items'),
        'transport'   => 'postMessage'
        ) 
    );

    $wp_customize->get_setting( 'home_products' )->transport = 'postMessage';

    $wp_customize->add_control( new Dziri_Customize_Control_Checkbox_Multiple( $wp_customize, 'home_products', 
        array(
            'label'             => __( 'Product\'s Tabs', 'dziri' ),
            'section'           => 'dziri_home_products',
            'settings'          => 'home_products',
            'type'              => 'checkbox-multiple',
            'sanitize_callback' => 'dziri_checkbox_tabs',
            'choices'   => array(
                'new-arrivals'      => 'New Arrivals',
                'featured-products' => 'Featured Products',
                'onsale-items'      => 'On Sale Items',
                )
            ) 
        ) 
    );

class Dziri_Customize_Control_Checkbox_Multiple extends WP_Customize_Control {

    public $type = 'checkbox-multiple';

    public function render_content() {

        if ( empty( $this->choices ) )
            return; ?>

        <?php if ( !empty( $this->label ) ) : ?>
            <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
        <?php endif; ?>

        <?php if ( !empty( $this->description ) ) : ?>
            <span class="description customize-control-description"><?php echo $this->description; ?></span>
        <?php endif; ?>

        <?php $multi_values = !is_array( $this->value() ) ? explode( ',', $this->value() ) : $this->value(); ?>

        <ul>
            <?php foreach ( $this->choices as $value => $label ) : ?>

                <li>
                    <label>
                        <input type="checkbox" value="<?php echo esc_attr( $value ); ?>" <?php checked( in_array( $value, $multi_values ) ); ?> data-customize-setting-link="<?php echo esc_attr( $value ); ?>" />
                        <?php echo esc_html( $label ); ?>
                    </label>
                </li>

            <?php endforeach; ?>
        </ul>

        <input type="hidden" <?php $this->link(); ?> value="<?php echo esc_attr( implode( ',', $multi_values ) ); ?>" />
    <?php 
    }
}

function dziri_checkbox_tabs( $values ) {

    $multi_values = !is_array( $values ) ? explode( ',', $values ) : $values;

    return !empty( $multi_values ) ? array_map( 'sanitize_text_field', $multi_values ) : array();
}


function dziri_theme_preview_register() {

    wp_enqueue_script( 'dziri-customize-controls', get_template_directory_uri()  . '/assets/js/customize-controls.js', array( 'jquery', 'customize-preview' ), _DZIRI_VERSION, true  );
}

add_action( 'customize_preview_init', 'dziri_theme_preview_register' );

And here's my customize-controls.js code:

(function($) {
  $(window).load(function() {
    console.log($('.customize-control-checkbox-multiple input[type="checkbox"]'));
    // My Code Here
    })
})(jQuery);

When I check the code by inspecting elements, I find that the tag ".customize-control-checkbox-mutiple" exists:

<li id="customize-control-home_products" class="customize-control customize-control-checkbox-multiple">
  <span class="customize-control-title">Product's Tabs</span>
  <div class="customize-control-notifications-container"></div>
  <ul>
    <li>
      <label>
        <input type="checkbox" value="new-arrivals" checked="checked" data-customize-setting-link="new-arrivals">
        New Arrivals                    
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox" value="featured-products" checked="checked" data-customize-setting-link="featured-products">
        Featured Products                   
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox" value="onsale-items" checked="checked" data-customize-setting-link="onsale-items">
        On Sale Items                   
      </label>
    </li>
  </ul>
  <input type="hidden" data-customize-setting-link="home_products" value="new-arrivals,featured-products,onsale-items">
</li>

And that's what I get as results on the console:

e.<computed> {length: 0, prevObject: ce.fn.init}

But When I console.log on console directly, I get this results:

e.<computed> {0: input, 1: input, 2: input, length: 3, prevObject: ce.fn.init}

Any help, please?

本文标签： phpCan39t find elemnts on the DOM using Custom Control in Customizer API