忍者表单：多部分表单 - 点击字段后的下一步（jQuery）

Question

我一直在尝试使用Ninja Forms + Multi Step Form插件实现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插件的具体开发者资源。

- Edward Westbury

Answer 1

我在 Ninja Forms 开发者 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')可能会导致性能问题，我听说过这一点，但似乎并没有影响我的表单。

- Bobby

Answer 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 );

- Ryan Lafazan