Question

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

使用以下功能，我可以成功触发对下一个按钮的单击，但仅在第一步上即可。一旦加载了第二步，整个功能似乎就没有绑定了（由于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插件上找不到任何具体的开发人员资源。

Answer 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')可能会导致性能问题，但这似乎并没有影响我的表格。

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

忍者表单：多部分表单-现场点击下一步（jQuery）

2 个答案: