title: jQuery wordpress customizer with layers theme open widget on click
body: <p>I use a wordpress theme called layers, it has it's own layout builder that uses custom widgets to add content to a page.</p>
  
  <p>I am trying to develop a user onboarding plugin for this when a user enters the customizer for the first time. What I am trying to ahieve is when a user clicks "Next" on step 4 (the button has the class <code>.step4</code>), the layers widget opens in the customizer.</p>
  
  <p>I can see that within layers there is a function called <code>layers_expand_widget</code> which I am trying to bind to a on click event.</p>
  
  <p>Here is the contents of the layers_expand_widget function:</p>
  
  <pre><code>function layers_expand_widget( $widget_li, $widget, e ){
  
      // Instant user feedback
      $widget_li.addClass('layers-focussed');
  
      // Instantly remove other classes
      $('.layers-focussed').not( $widget_li ).removeClass('layers-focussed layers-loading');
  
      // Handle the first time Init of a widget.
      if ( !$widget_li.hasClass( 'layers-loading' ) &amp;&amp; !$widget_li.hasClass( 'layers-initialized' ) ){
  
          $widget_li.addClass('layers-loading');
          $widget_li.addClass( 'layers-initialized' );
  
          if ( 'click' === e.type ) {
              // If event is 'click' it's our early invoked event so we can do things before all the WP things
              setTimeout(function(){
                  $widget.trigger( 'layers-interface-init' );
              }, 50 );
          } else {
              // If event is 'expand' it's a WP invoked event that we use as backup if the 'click' was not used.
              // eg 'shift-click' on widget in customizer-preview
              $widget.trigger( 'layers-interface-init' );
          }
      }
  }
  </code></pre>
  
  <p>And here is my script (which is loaded after the above code).</p>
  
  <pre><code>jQuery('.step4').on('click', function (e) {
      var $widget_li = $('#customize-control-widget_layers-widget-column-30');
      var $widget = $widget_li.find( '.widget' );
      layers_expand_widget( $widget_li, $widget, e );
  });
  </code></pre>
  
  <p>Currently my script does nothing, is there something obvious I am missing?</p>
  
  <p><strong>UPDATE: Here is my full js code:</strong></p>
  
  <pre><code>jQuery(document).ready(function ($) {
    $('body').attr('onboarding_step', 'step1');
    $('body.wp-customizer').addClass('skizzar_onboarding');
    $('&lt;div class="so_overlay"&gt;&lt;/div&gt;').insertBefore('body.wp-customizer');
  
    $('.so_overlay').html('&lt;div id="onboarding_steps_container" class="step1"&gt;&lt;/div&gt;');
    $('#onboarding_steps_container').html('&lt;div class="onboarding_steps"&gt;&lt;/div&gt;&lt;div class="button_holder"&gt;&lt;button id="next"&gt;NEXT&lt;/button&gt;&lt;button id="prev"&gt;PREVIOUS&lt;/button&gt;&lt;/div&gt;');
  
  // here's the steps
   var steps = [
     "wp-content/plugins/skizzar-onboarding/ajax/step1.php",
     "wp-content/plugins/skizzar-onboarding/ajax/step2.php",
     "wp-content/plugins/skizzar-onboarding/ajax/step3.php",
     "wp-content/plugins/skizzar-onboarding/ajax/step4.php",
     "wp-content/plugins/skizzar-onboarding/ajax/step5.php",
   ];
   var classes = [
     "step1",
     "step2",
     "step3",
     "step4",
     "step5",
   ]
   counter = 0;
   $('.onboarding_steps').load(steps[counter]);
   $('#next').click(function () {
     counter = (counter + 1) % steps.length; 
     $('.onboarding_steps').load(steps[counter]); 
     $('#onboarding_steps_container, .button_holder button').attr('class', 'step' + (counter + 1)); 
     $('body').attr('onboarding_step', 'step' + (counter + 1)); 
   });
  
    $( 'button #next.step2' ).on("click", function(){
      alert('im here');
    });
  
  });
  </code></pre>