忍者表单:多部分表单 - 下一步字段单击(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();
});
});

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

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