jQuery wordpress定制器，带有图层主题，点击打开小部件

我使用一个叫做层的wordpress主题，它有自己的布局生成器，使用自定义小部件向页面添加内容

当用户第一次进入定制程序时，我正在尝试为此开发一个用户登录插件。我想提醒的是，当用户在步骤4上单击“下一步”（按钮具有类

.step4

）时，层小部件将在自定义程序中打开

我可以看到在层中有一个名为

layers\u expand\u widget

的函数，我正试图将它绑定到一个点击事件

以下是layers_expand_小部件功能的内容：

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' ) && !$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' );
        }
    }
}

这是我的脚本（在上面的代码之后加载）

目前我的脚本什么都没做，有什么明显的东西我遗漏了吗

更新：这是我的完整js代码：

jQuery(document).ready(function ($) {
  $('body').attr('onboarding_step', 'step1');
  $('body.wp-customizer').addClass('skizzar_onboarding');
  $('<div class="so_overlay"></div>').insertBefore('body.wp-customizer');

  $('.so_overlay').html('<div id="onboarding_steps_container" class="step1"></div>');
  $('#onboarding_steps_container').html('<div class="onboarding_steps"></div><div class="button_holder"><button id="next">NEXT</button><button id="prev">PREVIOUS</button></div>');

// 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');
  });

});

jQuery（文档）.ready（函数（$）{
$（'body'）.attr（'onboard_step'，'step1'）；
$（'body.wp customizer'）.addClass（'skizzar_onboard'）；
$（''）.insertBefore（'body.wp customizer'）；
$（'.so_overlay'）.html（''）；
$（'onboard'u steps'u container'）.html（'NEXTPREVIOUS'）；
//这是步骤
变量步骤=[
“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”，
];
变量类=[
“第1步”，
“第二步”，
“第三步”，
“第四步”，
“第五步”，
]
计数器=0；
$（'.onboard_steps'）。加载（步骤[计数器]）；
$（“#下一步”）。单击（函数（）{
计数器=（计数器+1）%steps.length；
$（'.onboard_steps'）。加载（步骤[计数器]）；
$（'on-board'u steps'u container，.button'u holder button'）.attr（'class'，'step'+（counter+1））；
$（'body'）.attr（'onboard_step'，'step'+（counter+1））；
});
$（'button#next.step2'）。打开（“单击”，函数（）{
警惕（“我在这里”）；
});
});

您是否已验证您是否真正进入了“单击处理程序”功能以及“层展开”小部件？@mhodges我不太确定如何才能做到这一点。如果有帮助，下面是包含layers\u expand\u小部件功能的完整代码。另外，如果我添加console.log（“按钮按下”）；在我的代码中，当layers_expand_小部件出现时，控制台中没有显示任何内容，只是发出警报（“我在这里”）；在单击处理程序中以及层的顶部，展开小部件（）函数。如果收到警报，则表示您已输入代码块。如果没有，您可以消除许多错误，并关注函数没有执行的原因（错误的选择器、错误的语法等）。我还注意到，在.removeClass（）中，您同时删除了两个类。我发现这有时是有问题的。将这些链接在一起：.removeClass（“关注层”）.removeClass（“加载层”）；如果切换添加类的行和删除类的行，也可以删除.not（..）。让我知道如果这些事情有帮助的话，你也不会删除$widget_li上的layers加载类，如果这有区别的话。如果它曾经应用于$widget\u li，那么layers\u expand\u widget（）函数中的其余代码都不会运行，因为$widget_li.hasClass（“层加载”）将返回false

jQuery(document).ready(function ($) {
  $('body').attr('onboarding_step', 'step1');
  $('body.wp-customizer').addClass('skizzar_onboarding');
  $('<div class="so_overlay"></div>').insertBefore('body.wp-customizer');

  $('.so_overlay').html('<div id="onboarding_steps_container" class="step1"></div>');
  $('#onboarding_steps_container').html('<div class="onboarding_steps"></div><div class="button_holder"><button id="next">NEXT</button><button id="prev">PREVIOUS</button></div>');

// 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');
  });

});