metabox - Using WP Color Picker in Repeatable Fields

admin管理员组

文章数量:1384166

I wrote a repeater script that clones the last field group before it. My issue is that cloned WP Color Picker fields don't open the new color spectrum when clicked on but instead opens the color picker in the group it was cloned from.

Of course, it works fine once you save the field and reload the page, but not on the fly as you clone the prior group.

Here's the field HTML:

<div class="md-repeat">

    <a href="#" class="md-repeat-add">Add Another Color Picker</a>

    <div class="md-repeat-field">
        <label for="my_field">My Color Picker Field</label>
        <input name="my_field" id="my_field" type="text" class="my-colorpicker" />
    </div>

</div>

and the repeater scripts:

...

add: function() {
    $( ".md-repeat-add" ).click( function( e ) {
        e.preventDefault();

        var lastRepeatingGroup = $( this ).closest( '.md-repeat' ).find( '.md-repeat-field' ).last(),
            clone              = lastRepeatingGroup.clone( true );

        clone.find( 'input.regular-text, textarea, select' ).val( '' );
        clone.find( 'input.regular-text' ).prop( 'readonly', false );
        clone.find( 'input[type=checkbox]' ).attr( 'checked', false );
        clone.insertAfter( lastRepeatingGroup );

        MD_Repeatable_Fields.resetAtts( clone );
    });
},

resetAtts: function( section ) {
    var attrs = [ 'for', 'id', 'name' ],
        tags  = section.find( 'input, label, textarea, select' ),
        count = section.index();

    tags.each( function() {
        var $this = $( this );

        $.each( attrs, function( i, attr ) {
            var attr_val = $this.attr( attr );

            if ( attr_val )
                $this.attr( attr, attr_val.replace( /(\d+)(?=\D+$)/, count ) );
        });
    });
},
...

How can I "reset" the color picker script to detect when new color pickers are made on the fly and execute the proper JS to open the new color picker when clicked?

I wrote a repeater script that clones the last field group before it. My issue is that cloned WP Color Picker fields don't open the new color spectrum when clicked on but instead opens the color picker in the group it was cloned from.

Of course, it works fine once you save the field and reload the page, but not on the fly as you clone the prior group.

Here's the field HTML:

<div class="md-repeat">

    <a href="#" class="md-repeat-add">Add Another Color Picker</a>

    <div class="md-repeat-field">
        <label for="my_field">My Color Picker Field</label>
        <input name="my_field" id="my_field" type="text" class="my-colorpicker" />
    </div>

</div>

and the repeater scripts:

...

add: function() {
    $( ".md-repeat-add" ).click( function( e ) {
        e.preventDefault();

        var lastRepeatingGroup = $( this ).closest( '.md-repeat' ).find( '.md-repeat-field' ).last(),
            clone              = lastRepeatingGroup.clone( true );

        clone.find( 'input.regular-text, textarea, select' ).val( '' );
        clone.find( 'input.regular-text' ).prop( 'readonly', false );
        clone.find( 'input[type=checkbox]' ).attr( 'checked', false );
        clone.insertAfter( lastRepeatingGroup );

        MD_Repeatable_Fields.resetAtts( clone );
    });
},

resetAtts: function( section ) {
    var attrs = [ 'for', 'id', 'name' ],
        tags  = section.find( 'input, label, textarea, select' ),
        count = section.index();

    tags.each( function() {
        var $this = $( this );

        $.each( attrs, function( i, attr ) {
            var attr_val = $this.attr( attr );

            if ( attr_val )
                $this.attr( attr, attr_val.replace( /(\d+)(?=\D+$)/, count ) );
        });
    });
},
...

How can I "reset" the color picker script to detect when new color pickers are made on the fly and execute the proper JS to open the new color picker when clicked?

• custom-field
• metabox
• settings-api
• color-picker

Share Improve this question edited Mar 12, 2017 at 16:52 Alex Mangini asked Feb 28, 2017 at 5:49 Alex ManginiAlex Mangini 2522 silver badges99 bronze badges 1

• check if it has event methods available, that you can attach a reset function to, once the event fires. or look into changes in the DOM with .change() api.jquery/change – The J Commented Feb 28, 2017 at 5:59

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

It's hard to know for sure, since you don't include the markup you're output for the metabox nor the JS you're using to clone. But, the following simplified setup seems to work for me:

metabox markup

<label for='my_field'>
    My Color Picker Field
</label>
<input name='my_field' id='my_field' type='text' class='my-colorpicker' />
<a href='#' class='clone-it'>Add Another Color Picker</a>

JS

(function ($) {
    // turn the field into a colorpicker
    $('.my-colorpicker').wpColorPicker () ;

    $('.clone-it').click (function () {
        // clone the field in question
        var field = $(this).prev ('.wp-picker-container').find ('.my-colorpicker').clone () ;

        // set the cloned field's value to ''
        // so it starts off without a specific color
        $(field).val ('') ;

        // your code to mod the cloned field's name, etc goes here 

        // add the cloned field to the metabox
        $(this).before (field) ;

        // turn the cloned field into a colorpicker
        $(field).wpColorPicker () ;
        }) ;

})(jQuery)

In case you deal with the Spectrum color picker, you need to destroy the color picker before cloning the field group by calling

$("#my_field").spectrum("destroy");

Then you need to bind new color pickers to the original and the cloned field group.

本文标签： metaboxUsing WP Color Picker in Repeatable Fields