Ninja Forms: Multi Part Forms - следующий шаг по щелчку поля (jQuery) - PullRequest
Новая
       17

Ninja Forms: Multi Part Forms - следующий шаг по щелчку поля (jQuery)

0 голосов
/ 28 августа 2018

У меня были проблемы с реализацией событий нажатия jQuery с плагином Ninja Forms + Multi Step. Цель состоит в том, чтобы избавить пользователя от необходимости нажимать кнопку «Далее».

Используя следующую функцию, я могу успешно вызвать нажатие на следующую кнопку, но только на первом шаге. Как только второй шаг загружается, кажется, что вся функция не связана (из-за смены 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.

Ответы [ 2 ]

0 голосов
/ 19 декабря 2018

Первый ответ - хорошее начало, но используемый 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 );

Чтобы написать стандартный jQuery в WordPress, как описано выше, оберните стандартный jQuery следующим образом: 

(function($) {

     <Standard jQuery>

 })( jQuery );
0 голосов
/ 14 ноября 2018

Я нашел это на каналах Slack для разработчиков Ninja Forms о том, как связывать функции с изменениями страниц. Может быть, это может быть решением для вас.

Вам нужно будет подключиться к смене страницы:

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'), я слышал, но это никак не влияет на мою форму.

...