jquery - 忍者形态 : Multi Part Forms - Next Step On Field Click (jQuery)

Question

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

使用以下函数，我可以成功触发单击下一步按钮，但仅限于第一步。一旦第二步加载，整个函数似乎就解除了绑定(bind)(由于 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();

    });

});

是否有更好的解决方案来实现这一目标？我似乎在多部分表单插件上找不到任何具体的开发人员资源。

Answer 1

我在 Ninja Forms Developer Slack channel 中找到了有关如何将函数绑定(bind)到页面更改的信息。也许这可能是您的解决方案。

You'll need to hook into the page change:

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

See: /assets/js/front-end/models/partCollection.js#33

看起来，如果您将操作 Hook 到页面更改，它将重新绑定(bind)到下一页上的新 DOM。

对我有用的另一种解决方案是将 jQuery 绑定(bind)到表单的父元素，该元素不会使用以下方法从 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') 可能会出现性能问题，但它似乎根本不会影响我的表单。