jQuery select2 无法将点击事件添加到自定义模板

Question

我正在尝试将自定义点击事件添加到我嵌入在 select2 处理程序中的图标。我没有使用默认的“x”，而是添加了三个字形图标，我想将自定义点击处理程序附加到这些图标上，并从那里使用 select2 事件 API 采取行动。

如果我点击实际标签，看起来这很有效，但不是我想要的单个图标。

我的 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/