jQuery не работает в модальном окне

Главные вкладки

Аватар пользователя sxweb sxweb 29 октября 2017 в 15:53

Приветствую. Задавал уже вопрос по виджету в этой теме http://drupal.ru/node/135084 , но так и не смог подключить данные скрипты к полям, решил написать сам.
Написал вот такой простой код:

(function($){
        $(document).ready(function(){
                $('.form-number').before('<i class="fa fa-minus"></i>');
                $('.form-number').after('<i class="fa fa-plus"></i>');
               
                $('.fa-minus').click(function() {
                        var formInt = parseInt($('#edit-submitted-count').val());
                        if (formInt > 1) {
                                formInt -=1;
                        $('#edit-submitted-count').val(formInt);
                        }
                       
                        });
                $('.fa-plus').click(function() {
                        var formInt = parseInt($('#edit-submitted-count').val());
                        formInt +=1;
                        $('#edit-submitted-count').val(formInt);
                        });
        });
})(jQuery);

Все работает в форме на странице, но вот в той же форме, но открываемой в модальном окне colorbox-node даже элементы не добавляются, то есть jQuery насколько я понимаю не отрабатывает там.
Может кто то подсказать в чем тут причина и как ее устранить? Только начал изучать jQuery.

Лучший ответ

Аватар пользователя godsman godsman 29 октября 2017 в 17:46
(function ($, Drupal, window, document) {

    'use strict';

    Drupal.behaviors.my_custom_behavior = {
        attach: function (context, settings) {

            $('.form-number').before('<i class="fa fa-minus"></i>');
            $('.form-number').after('<i class="fa fa-plus"></i>');

            $('.fa-minus').click(function () {
                var formInt = parseInt($('#edit-submitted-count').val());
                if (formInt > 1) {
                    formInt -= 1;
                    $('#edit-submitted-count').val(formInt);
                }

            });

            $('.fa-plus').click(function () {
                var formInt = parseInt($('#edit-submitted-count').val());
                formInt += 1;
                $('#edit-submitted-count').val(formInt);
            });

        }
    };

})(jQuery, Drupal, this, this.document);

попробуйте так

Комментарии

Аватар пользователя godsman godsman 29 октября 2017 в 17:35
(function ($, Drupal, window, document) {

  'use strict';

  // To understand behaviors, see https://drupal.org/node/756722#behaviors
  Drupal.behaviors.my_custom_behavior = {
    attach: function (context, settings) {

      // Place your code here.

    }
  };

})(jQuery, Drupal, this, this.document);

попробуйте так

Аватар пользователя sxweb sxweb 29 октября 2017 в 17:43

godsman wrote:

Drupal.behaviors.forAjaxForm = {

    attach: function (context, settings) {

     

        Ваш код
    }

  };

попробуйте так


Спасибо, теперь заработало. Правда почему то теперь по 3 плюса и по три минуса. Не понял почему так произошло. Обернуть нужно было весь текущий код в данный или только часть?

Аватар пользователя godsman godsman 29 октября 2017 в 17:46
(function ($, Drupal, window, document) {

    'use strict';

    Drupal.behaviors.my_custom_behavior = {
        attach: function (context, settings) {

            $('.form-number').before('<i class="fa fa-minus"></i>');
            $('.form-number').after('<i class="fa fa-plus"></i>');

            $('.fa-minus').click(function () {
                var formInt = parseInt($('#edit-submitted-count').val());
                if (formInt > 1) {
                    formInt -= 1;
                    $('#edit-submitted-count').val(formInt);
                }

            });

            $('.fa-plus').click(function () {
                var formInt = parseInt($('#edit-submitted-count').val());
                formInt += 1;
                $('#edit-submitted-count').val(formInt);
            });

        }
    };

})(jQuery, Drupal, this, this.document);

попробуйте так

Аватар пользователя sxweb sxweb 29 октября 2017 в 18:06

Да, как раз это и читаю, спасибо. Первый день с jQuery работаю, поэтому немного сложновато)
Сейчас попробую разобраться как в данном случае это дело применить.

Аватар пользователя sxweb sxweb 29 октября 2017 в 18:22

Ну похоже справился, может кому то пригодится :

(function ($, Drupal, window, document) {
  'use strict';

  // To understand behaviors, see https://drupal.org/node/756722#behaviors
  Drupal.behaviors.my_custom_behavior = {
    attach: function (context, settings) {
       
              $('.form-number').once(function () {
                $('.form-number').before('<i class="fa fa-minus"></i>');
              });
              $('.form-number').once(function () {
                $('.form-number').after('<i class="fa fa-plus"></i>');
              });

                       
                       
                        $('.fa-minus').once(function () {
                        $('.fa-minus').click(function() {
                                        var formInt = parseInt($('#edit-submitted-count').val());
                                        if (formInt > 1) {
                                                formInt -=1;
                                                $('#edit-submitted-count').val(formInt);
                                        }
                        });
                        });

                $('.fa-plus').once(function () {
                $('.fa-plus').click(function() {
                                var formInt = parseInt($('#edit-submitted-count').val());
                                formInt +=1;
                                $('#edit-submitted-count').val(formInt);
                        });
            });

    }
 };

})(jQuery, Drupal, this, this.document);

Большое спасибо за помощь!