jQuery select2 cannot add click event to custom template

Question

I am attempting to add custom click events to icons I've embedded in a select2 handler. Instead of having the default 'x', I've added three glyphicon icons that I'd like to attach custom click handlers to and take action using the select2 events API from there on out.

It looks like this works if I click on the actual tag, but not on the individual icons as I'd like it to.

My JavaScript looks like the following:

 $( 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);
    }); 

Here's the jsfiddle: https://jsfiddle.net/Lwda44q5/

Answer 1

Unfortunately select2 would only provide the information regarding the element that was clicked since it does not support nested elements ( elements other than li - ul ). However, you can tag the element which was clicked inside the option ( by introducing a css class or data-attribute - leave that upto you ) and then in your function, find that element as your target.

 $( 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);
    }); 

Example : https://jsfiddle.net/Lwda44q5/1/