Ninja 表单：多部分表单 - 字段单击的下一步 (jQuery)答案

【问题标题】：Ninja Forms: Multi Part Forms - Next Step On Field Click (jQuery)Ninja 表单：多部分表单 - 字段单击的下一步 (jQuery)
【发布时间】：2019-02-03 09:52:44
【问题描述】：

我在使用 Ninja Forms + Multi Step 表单插件实现 jQuery 点击事件时遇到了麻烦。目标是消除用户单击“下一步”按钮的需要。

使用以下功能，我可以成功触发单击下一步按钮，但仅限于第一步。一旦第二步加载整个函数似乎是未绑定的（由于 DOM 的变化？）。

jQuery(document).on( 'nfFormReady', function( e, layoutView ) {

    jQuery( ".nf-field-element ul li label" ).click(function() {

      var nextButton = jQuery(this).closest('.nf-form-content').find('.nf-next');
      jQuery(nextButton).click();

    });

});

有没有更好的解决方案来实现这一点？我似乎在 Multi-Part Form 插件上找不到任何具体的开发人员资源。

【问题讨论】：

标签： jquery wordpress forms ninja-forms

【解决方案1】：

我在 Ninja Forms Developer Slack 频道中找到了有关如何将函数绑定到页面更改的内容。也许这可能是您的解决方案。

您需要挂钩页面更改：

nfRadio.channel( 'nfMP' ).trigger( 'change:part', this );

见：/assets/js/front-end/models/partCollection.js#33

似乎如果您将您的操作与页面更改挂钩，它将重新绑定到下一页上的新 DOM。

对我有用的另一种解决方案是将您的 jQuery 绑定到表单的父元素，该元素不会使用以下内容从 DOM 中删除：

jQuery(document).on('click', '#parentid'`, function( e layoutView ) {

    jQuery( ".nf-field-element ul li label" ).click(function() {

      var nextButton = jQuery(this).closest('.nf-form-content').find('.nf-next');
      jQuery(nextButton).click();

    });
});

我尚未对此进行测试，但希望它能为您指明正确的方向。

另外，我听说您使用on('click') 可能会遇到性能问题，但这似乎根本不会影响我的表单。

【讨论】：

【解决方案2】：

第一个答案是一个好的开始，但是使用的jQuery需要双击才能注册。加载到页脚中的以下脚本就像一个魅力：

(function($) {
  $(document).ready(function () { 

         // on ID (#) click, do the following:
         $(document).on('click', '#clickedID', function(event) {

          event.preventDefault;

          // click the input button associated with .nf-next class
          $(".nf-next").click();

        });

    });
})( jQuery );

为了在 WordPress 中编写标准 jQuery，就像上面一样，将标准 jQuery 包装在以下内容中：

(function($) {

     <Standard jQuery>

 })( jQuery );

【讨论】：