Рейтинг:0

Добавить прослушиватель событий в список выбора

флаг cn

Я прикрепил следующий js к открытому полю формы представлений, и он работает при загрузке первой страницы, но когда форма изменяется (с помощью ajax), она не срабатывает.

Я не могу понять, где добавить прослушиватель событий для изменения списка выбора.

Следующее не использует jQuery, но использует основную библиотеку, поэтому я хотел бы избежать jQuery.

/**
 * @файл
 * Корректировки целевой страницы.
 */

 (функция (Drupal, один раз) {
    'использовать строгий';
  
    /**
     * Прикрепленное поведение для Custom DataLayer.
     *
     * @type {{attach: Drupal.behaviors.CurrentSelectOption.attach}}
     */
    Drupal.behaviors.CurrentSelectOption = {
      прикрепить: функция прикрепить (контекст) {
        // Загрузка первой страницы
        let elements = Once('CurrentSelectOption', 'select#edit-field-event-country.form-select', context);
        elements.forEach (обработка обратного вызова);
      }
    };
  
    функция processingCallback (значение, индекс) {
      пусть option = значение.options[значение.selectedIndex]
      значение.удалить (опция);
      value.add (опция, 0);
    }

})(Друпал, один раз);
Jaypan avatar
флаг de
Почему вы избегаете jQuery? Он идет в комплекте с ядром. Прошло почти 2 десятилетия с тех пор, как я писал сырой JS без jQuery, поэтому мне трудно предоставить решение, хотя у меня было бы одно без этого требования.
флаг cn
Я не хотел добавлять в сценарий еще одну зависимость, если в этом не было необходимости, и она работала, за исключением того, что не срабатывала при изменении формы. Я ничего не имею против jQuery :-)
Рейтинг:0
флаг cn

Когда вызов AJAX выполняется через Drupal API, поведение повторно прикрепляется. Поэтому, если API используется, ответ заключается в том, чтобы просто поместить код внутри прикреплять метод в вашем поведении, где он у вас уже есть.

Суть в том, что не используйте идентификаторы для целевых элементов. Это общее правило выбора DOM в CSS/JS, но здесь оно особенно важно, поскольку Drupal сгенерирует новый идентификатор для элемента формы, который он заменяет. Если вы проверите выбор и его оболочку после вызова AJAX, вы увидите -2 добавлен к исходному идентификатору.

В остальном (без теста) ваш код выглядит нормально.

флаг cn
Я забыл об этом :-) использование класса решило проблему.

Ответить или комментировать

Большинство людей не понимают, что склонность к познанию нового открывает путь к обучению и улучшает межличностные связи. В исследованиях Элисон, например, хотя люди могли точно вспомнить, сколько вопросов было задано в их разговорах, они не чувствовали интуитивно связи между вопросами и симпатиями. В четырех исследованиях, в которых участники сами участвовали в разговорах или читали стенограммы чужих разговоров, люди, как правило, не осознавали, что задаваемый вопрос повлияет — или повлиял — на уровень дружбы между собеседниками.