Отслеживание кликов по определенному раскрывающемуся элементу Select2

Я работаю над A / B-тестом, и для измененного варианта я хочу отслеживать клики в раскрывающемся списке Select2.

Эта конкретная опция добавляется динамически, что, на мой взгляд, усложняет ситуацию (я также меняю заполнитель выпадающих списков, но я не думаю, что это что-то испортило).

С моей платформой AB / тестирования я могу реально отслеживать только клики для определенного селектора, поэтому я пытаюсь выяснить, каким образом я могу выбрать этот регистр параметров.

К сожалению, я не могу изменить саму разметку, но могу использовать JavaScript/JQ.

Обычно, если бы я писал сценарий, я просто извлекал выбранный элемент из Select2, но в этом случае я ограничен использованием фактического селектора, в котором можно отслеживать клики.

Я использую прослушиватели событий для имитации и тестирования селекторов CSS (нижняя часть кода JS), но безуспешно.

$(document).ready(function() {
    $('#dropdown').select2({
    	placeholder: "Old Placeholder",
      minimumResultsForSearch: -1
    });

     var newOption = {
        id: "01",
        text: 'Dynamically Added Option',
        value: "01"
     };
    
    var newOption = new Option(newOption.text, newOption.id, false, false);
    $('#dropdown').append(newOption);
    
    
   $('#dropdown').trigger('change.select2');
   
   $('.select2-selection__placeholder').html('New Placeholder'); 
   
   /******* HERE'S WHERE I'M TESTING SELECTORS FOR WHEN "DYNAMICALLY ADDED OPTION" IS SELECTED *******/
   
   // track select2 list item with an id containing the new option's id
   $('.select2-results__option[id* = "01"]').on('click', function(){
   		alert("this never happens");
   });
   
   $('option[value = "01"]').on('click', function(){
   		alert("this also never happens");
   });
   
});

select {
  width: 200px;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel = "stylesheet"/>

<select id = "dropdown">
  <option></option>
  <option value = "1">option 1</option>
  <option value = "2">option 2</option>
  <option value = "3">option 3</option>
</select>

Просто для пояснения, вы просто пытаетесь добавить прослушиватель событий ко второму дочернему элементу в раскрывающемся списке?

— 21.09.2018 17:48

Не совсем ... Мне нужно предоставить селектор CSS для платформы тестирования для измерения кликов, и селектор должен нацеливаться на элемент, который я динамически добавил в select2. Я использовал прослушиватели событий, чтобы смоделировать это, чтобы увидеть, могу ли я получить событие щелчка для регистрации элемента.

— 21.09.2018 17:54

javascript jquery css jquery-select2

21.09.2018 17:44

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

129

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете добавить событие изменения для выбора с небольшим тестом для нового элемента, например:

$('#dropdown').on('change', function() {
    if ($(this).val() === '01') {
      console.info('The new option selected');
    }
});

$(document).ready(function() {
  $('#dropdown').select2({
    placeholder: "Old Placeholder",
    minimumResultsForSearch: -1
  });

  var newOption = {
    id: "01",
    text: 'Dynamically Added Option',
    value: "01"
  };

  var newOption = new Option(newOption.text, newOption.id, false, false);

  $('#dropdown').append(newOption);
  $('#dropdown').trigger('change.select2');
  $('.select2-selection__placeholder').html('New Placeholder');


  // track select2 list item with an id containing the new option's id
  $('#dropdown').on('change', function() {
    if ($(this).val() === '01') {
      console.info('The new option selected');
    }
  });
});

select {
  width: 200px;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel = "stylesheet" />

<select id = "dropdown">
  <option></option>
  <option value = "1">option 1</option>
  <option value = "2">option 2</option>
  <option value = "3">option 3</option>
</select>

21.09.2018 18:07

Другие вопросы по теме

Проблема изменения размера окна для определения точки привязки

Измените положение ползунка jquery путем изменения ввода (keyup)

Скрыть все li в списке, но не тот li, у которого имя класса "имеет значение", с помощью jquery

Сравните конкретное значение объекта и сделайте что-нибудь, если

Javascript, как сравнить специальный символ хеша

Отправка модели в контроллер с использованием вызова Ajax и возврат одной переменной для отображения сообщения об успешном завершении на экране

Как отправить массив данных в контроллер с помощью ajax в laravel

Как управлять псевдоэлементом :: before с помощью jQuery?

Как искать элемент в базе данных, если он не найден в объекте в angular.js?

Обновление модального тела и модального нижнего колонтитула с помощью javascript?

Отслеживание кликов по определенному раскрывающемуся элементу Select2

Ответы 1

Другие вопросы по теме

Похожие вопросы