跟踪特定 Select2 下拉项的点击次数答案

【问题标题】：Tracking clicks on a specific Select2 drop down item跟踪特定 Select2 下拉项的点击次数
【发布时间】：2018-09-21 15:44:49
【问题描述】：

我正在进行 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>

【问题讨论】：

只是为了澄清，您只是想向下拉列表中的第二个子元素添加一个事件侦听器？
不完全...我需要为测试平台提供一个 CSS 选择器来测量点击次数，并且选择器必须针对我动态添加到 select2 的项目。我正在使用事件监听器来模拟它，看看我是否可以获得点击事件来注册该项目。

标签： javascript jquery css jquery-select2

【解决方案1】：

您可以为选择添加一个更改事件，并对新元素进行小测试，例如：

$('#dropdown').on('change', function() {
    if ($(this).val() === '01') {
      console.log('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.log('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>

【讨论】：