trigger('change') not working

Question

I am using wp.media modal attachment API to import images to customizer. Along with the images, I have imported their meta data as well ( Title, Description, Alt Text etc.). These are in the form of input fields in the Customizer. You can check out the Customizer Screenshot here.

Now, I want to the user to be able to make changes and save the attachment details fields using the 'Publish' button. Since I am working in a jQuery environment, I am trying to enable the 'Publish' Button using the trigger('change') mechanism but I am not able to do it. This is the code for triggering the change event-

jQuery('.container input').on( 'input', function() {
        jQuery(this).trigger('change');
    });

Here, I am binding the trigger event to the change in the input field.

On PHP Side, I had to make 2 Custom Fields for Slide URL and CTA Button while the Title and Description were already present. Here is the function filtered through attachment_fields_to_edit. Obviously, the corresponding filter to save the values was also used.

To show it on the Customizer, I created a Custom Control. Here is the render part of the code for that. $id is a string containing IDs of various attachments separated by a comma.

I know on some level that the approach to the whole saving attachment details things is wrong but am not able to pinpoint the exact error. Any help will be appreciated.

Also, if this is not the method of saving attachment details in Customizer, any help towards the right direction is welcome.

Answer 1

To use a custom control, you need a field with special attributes to be linked to the "publish" button.

if you don't want to display this field, you can generate a hidden field like that :

class WP_Test_2_Customize_Control extends WP_Customize_Control
{

    public function render_content()
    {

        ?>

            <input
                id="<?php echo htmlspecialchars("_customize-input-{$this->id}");?>"
                type="hidden"

                <?php $this->input_attrs();?>

                <?php if (!isset($this->input_attrs["value"])) {?>
                    value="<?php echo htmlspecialchars($this->value());?>"
                <?php }?>

                <?php $this->link();?>
            />

        <?php

    }


}

then, when you modify values in the other fields, you put values in this field with JavaScript and then trigger the change event on this hidden field.