Run JavaScript after Ajax Call I have a form file:

namespace Drupal\h_scheduler\Form;
use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;
use \Drupal\node\Entity\Node;

class DayAddEntries extends FormBase {

  public counter = 0;

  /**
   * {@inheritdoc}
   */
  public function getFormId() {
    return 'hs_day_add_form';
  }

  /**
   * {@inheritdoc}
   */
  public function buildForm(array $form, FormStateInterface $form_state) {

    $form_state-&gt;setCached(FALSE);

    $form['#attached']['library'][] = 'h_scheduler/form_actions';

    /*...More fields....*/

    /* Special */
    $form['specials'] = array(
      '#type' =&gt; 'fieldset',
      '#tree' =&gt; TRUE,
      '#title' =&gt; t('Specials'),
      '#prefix' =&gt; '&lt;div id="specials"&gt;',
      '#suffix' =&gt; '&lt;/div&gt;',
    );

    if ($this-&gt;counter) {
      for ($i = 1; $i &lt;= $this-&gt;counter; $i++) {
        $form['specials']['special'.$i] = array(
          '#type' =&gt; 'fieldset',
          '#title' =&gt; t('Special ') . $i,
          '#tree' =&gt; TRUE,
        );
        $form['specials']['special'.$i]['field'] = array(
          '#type' =&gt; 'number',
          '#title' =&gt; t('Every'),
          '#title_display' =&gt; 'before',
        );
        $form['specials']['special'.$i]['field'] = array(
          '#type' =&gt; 'textfield',
          '#title' =&gt; t('Prefix'),
          '#title_display' =&gt; 'after',
        );
      }
    }
    $form['specials']['operations']['#type'] = 'actions';
    $form['specials']['operations']['add_special'] = array(
      '#type' =&gt; 'button',
      '#value' =&gt; $this-&gt;t('Add special'),
      '#ajax' =&gt; array(
        'callback' =&gt; '::ajaxAddSpecial',
        'wrapper' =&gt; 'specials',
      ),
    );

    /* Not working */
    $form['specials']['operations']['remove_special'] = array(
      '#type' =&gt; 'button',
      '#value' =&gt; $this-&gt;t('Remove special'),
      '#ajax' =&gt; array(
        'callback' =&gt; '::ajaxRemoveSpecial',
        'wrapper' =&gt; 'specials',
      ),
    );

    /* Submit */
    $form['actions']['#type'] = 'actions';
    $form['actions']['submit'] = array(
      '#type' =&gt; 'submit',
      '#value' =&gt; $this-&gt;t('Save'),
      '#button_type' =&gt; 'primary',
    );

    $this-&gt;counter++;

    return $form;
  }

  /**
   * Increments the number of specials to have
   */
  public function ajaxAddSpecial($form, FormStateInterface $form_state) {
    return $form['specials'];
  }

  /**
   * Decrements the number of specials to have
   */
  public function ajaxRemoveSpecial($form, $form_state) {
    $this-&gt;counter -= 2;
    return $form['specials'];
  }

  /**
   * {@inheritdoc}
   */
  public function submitForm(array &amp;$form, FormStateInterface $form_state) {

    /* Do stuff */

  }
}


jQuery:

jQuery(function($) {
  $('#edit-specials .fieldset-wrapper .fieldset-wrapper, #edit-regular .fieldset-wrapper').addClass('entry-wrapper').each(addStyleClasses);

  function addStyleClasses() {
    console.log('hi');
    $(this).children('.form-item')
      .addClass(function() {
        var regex = /form-item-\S+-(\S+)/;
        return regex.exec($(this).attr('class'))[1];
      })
      .not('.every').wrapAll('&lt;div class="item-wrapper"&gt;');
  }


});

I'm able to add a new "special" item, but when I do it appears wacky.

This is because I've styled the form using a jQuery function that adds classes and wraps elements. However, that function does not run when the form['specials'] is rebuilt.

My question, how do I run a JS function after an ajax call?
This has a solution on Stackexchange here already, but:

This would be your full javascript file:

(function ($, Drupal) {
  Drupal.behaviors.myModuleName = {
    attach: function (context, settings) {
      // I am doing a find() but you can do a once() or whatever you like :-)
      $('#element', context).find('.sub-element').each(function () {
        // Do your thing here
      });
    }
  };
})(jQuery, Drupal);


Note on the question's js: I would say when calling a function like your addStyleClasses() it would be more reliable to explicitly pass your target element in the function call than using $(this) in there.