block script backend render problem

• lust3103

• October 4, 2022 at 11:11 am

Hi

I’m trying to render my Block JS in the backend.
I made hide and show elements in JS with custom checkbox icon (switcher)

This is my code :

acf_register_block_type(
		array(
			'name' => 'formulaires-documentayion',
			'title' => 'Formulaires documentation',
			'description' => 'Formulaires documentation',
			'render_template'=>'/assets/blocks/formulaires-documentaion/formulaires-documentaion.php',
			'icon' => 'list-view',
			'keywords' => array('documentation, formulaire, documents, formulaires, mycat'),
			'mode' => 'preview',
			'category'          => 'mycat',
			'enqueue_assets'    => function() {
				wp_enqueue_style( 'formulaires-documentaion', get_stylesheet_directory_uri() . '/assets/blocks/formulaires-documentaion/formulaires-documentaion.css' );
				wp_enqueue_script( 'formulaires-documentaion', get_stylesheet_directory_uri() . '/assets/blocks/formulaires-documentaion/formulaires-documentaion.js', array('jquery'), '', true );
			}
		)
	);
	

and the JS

(function($){

    var initializeBlock = function( $block ) {
        $('<div class="ico"></div>').prependTo('.switcher .checkbox label');
        $('<div class="checkcolored"></div>').prependTo('.coloredcheckbox .checkbox label');

        $(".coloredcheckbox .checkbox input[type=checkbox]").change(function(){
            $(this).parent().toggleClass("chked");
        });

        $(".switcher .checkbox input[type=checkbox]").change(function(){
            $(this).parent().toggleClass("chked");
        });
    }

  $(document).ready(function(){
      
    initializeBlock();

});

 // Initialize dynamic block preview (editor).
 if( window.acf ) {
    window.acf.addAction( 'render_block_preview/type=formulaires-documentaion', initializeBlock );
  }

    
  
     
})(jQuery);

This is render in backend but it’s seems it’s loading multple time because it’s generating multiple <div class=”ico”>. But only in backend

Have you an idea what I did wrong ?

Capture.jpg.jpg