jQuery select2 не может добавить событие click к настраиваемому шаблону

Question

Я пытаюсь добавить пользовательские события кликов к значкам, которые я встроил в обработчик select2. Вместо того, чтобы иметь значение по умолчанию «x», я добавил три значка символов, которые я хотел бы присоединить к пользовательским обработчикам кликов, и предпринять действия, используя API событий select2 оттуда.

Похоже, это работает, если я нажимаю на фактический тег, но не на отдельных значках, как мне бы хотелось.

My JavaScript выглядит следующим образом:

$(document).ready(function() { 
     function formatPattern(p) 
     { 
      if (!p.id) return p.text; 

      var html; 
      html = '<div class="action-group">'; 
      html += '<a href="#" class="glyphicon glyphicon-remove"></a>'; 
      html += '<a href="#" class="glyphicon glyphicon-play"></a>'; 
      html += '<a href="#" class="glyphicon glyphicon-pause"></a>'; 
      html += '</div>'; 
      html += '<div class="select-text">' + p.id + '</div>'; 

      return html; 
     } 

     var tagBox = $('#tagPicker'); 
     tagBox.select2({ 
      tags: ['A', 'B', 'C'], 
      closeOnSelect: false, 
      formatResult: formatPattern, 
      formatSelection: formatPattern, 
      escapeMarkup: function(m) { return m; } 
     }); 

     tagBox = tagBox.data('select2'); 
     tagBox.selectChoice = (function(fn) { 
      return function(data, options) { 
       var target; 
       console.log(data); 
       console.log(options); 

       if (options != null) { 
        target = $(options.target); 
       } 

       if (target && target.hasClass('glyphicon-play')) { 
       console.log(" clicked play button "); 
       } else { 
        return fn.apply(this, arguments); 
       } 
      } 
     })(tagBox.selectChoice); 
    }); 

Вот jsfiddle: https://jsfiddle.net/Lwda44q5/

Answer 1

К сожалению select2 бы только предоставить информацию, касающуюся элемента, которая была нажата, поскольку он не поддерживает вложенные элементы (элементы другого чем li - ul). Однако вы можете пометить элемент, который был нажат внутри опции (путем введения класса css или data-attribute - оставьте это до вас), а затем в своей функции найдите этот элемент в качестве своей цели.

$(document).ready(function() { 
     function formatPattern(p) 
     { 
      if (!p.id) return p.text; 

      var html; 
      html = '<div class="action-group">'; 
      html += '<a href="#" class="glyphicon glyphicon-remove"></a>'; 
      html += '<a href="#" class="glyphicon glyphicon-play"></a>'; 
      html += '<a href="#" class="glyphicon glyphicon-pause"></a>'; 
      html += '</div>'; 
      html += '<div class="select-text">' + p.id + '</div>'; 

      return html; 
     } 

     var tagBox = $('#tagPicker'); 
     tagBox.select2({ 
      tags: ['A', 'B', 'C'], 
      closeOnSelect: false, 
      formatResult: formatPattern, 
      formatSelection: formatPattern, 
      escapeMarkup: function(m) { return m; } 
     }); 

     // introduce a click handler on the sub elements 
     $('.action-group a').on('click',function() 
     { 
      $('.action-group a').removeClass('active'); 
      $(this).addClass('active'); 
     }) 

     tagBox = tagBox.data('select2'); 
     tagBox.selectChoice = (function(fn) { 
      return function(data, options) { 

      var target = $(data).find("a.active"); // find the active element 
       if (target && target.hasClass('glyphicon-play')) { 
       console.log(" clicked play button "); 
       } else { 
        return fn.apply(this, arguments); 
       } 
      } 
     })(tagBox.selectChoice); 
    }); 

Пример: https://jsfiddle.net/Lwda44q5/1/