How to run a jquery function in a block?

I have a button that I would like to change the color of a block when it’s clicked. I can see the JS file in the editor so I know it’s enqueued but my script won’t run. The block was created with Advanced Custom Fields and in edit mode. I know there’s a special way to run jquery function in the editor but I forgot how to do it.

The block output looks like this:

<div class="acf-field-5eeb3586be7b6">
   <div class="button-field_5eeb3586be7b6">
      <div class="acf-input">
         <div class="acf-button-group">
            <button>
         </div>
      </div>
   </div>
</div>

And what my code is suppose to do is when .acf-button-group is clicked, The background in the field .acf-field-5eeb3586be7b6 changes to black.

And the JS code:

jQuery(document).ready(function(){
    jQuery(".button-field_5eeb3586be7b6 .acf-input .acf-button-group").click(function(){
        jQuery(".acf-field-5eeb3586be7b6").css('background','black');
    });
});

• This topic was modified 4 years, 5 months ago by openbayou.