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

我正在尝试将自定义单击事件添加到已嵌入select2处理程序的图标中。我没有使用默认的“x”，而是添加了三个glyphicon图标，希望将自定义单击处理程序附加到这些图标上，并从此开始使用select2 events 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);
    }); 

$（文档）.ready（函数（）{
函数格式模式（p）
{
如果（！p.id）返回p.text；
var-html；
html=''；
html+=''；
html+=''；
html+=''；
html+=''；
html+=''+p.id+''；
返回html；
}
var tagBox=$（“#tagPicker”）；
标记框。选择2({
标签：['A'，'B'，'C']，
closeOnSelect:false，
formatResult:formatPattern，
formatSelection:formatPattern，
转义标记：函数（m）{return m；}
});
tagBox=tagBox.data（'select2'）；
tagBox.selectChoice=（函数（fn）{
返回函数（数据、选项）{
var目标；
控制台日志（数据）；
console.log（选项）；
如果（选项！=null）{
target=$（options.target）；
}
if（target&&target.hasClass（'glyphicon-play'））{
日志（“点击播放按钮”）；
}否则{
返回fn.apply（这是参数）；
}
}
})（标记框。选择选项）；
}); 

---

下面是JSFIDLE:

不幸的是，

select2

只提供有关单击的元素的信息，因为它不支持嵌套元素（li-ul以外的元素）。但是，您可以标记在选项中单击的元素（通过引入

css

类或

数据属性

——由您自己决定），然后在函数中找到该元素作为目标

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

$（文档）.ready（函数（）{
函数格式模式（p）
{
如果（！p.id）返回p.text；
var-html；
html=''；
html+=''；
html+=''；
html+=''；
html+=''；
html+=''+p.id+''；
返回html；
}
var tagBox=$（“#tagPicker”）；
标记框。选择2({
标签：['A'，'B'，'C']，
closeOnSelect:false，
formatResult:formatPattern，
formatSelection:formatPattern，
转义标记：函数（m）{return m；}
});
//在子元素上引入单击处理程序
$（'.action group a'）。在（'单击'，函数（）上）
{
$（'.action group a'）.removeClass（'active'）；
$（this.addClass（'active'）；
})
tagBox=tagBox.data（'select2'）；
tagBox.selectChoice=（函数（fn）{
返回函数（数据、选项）{
var target=$（data.find（“a.active”）；//查找活动元素
if（target&&target.hasClass（'glyphicon-play'））{
日志（“点击播放按钮”）；
}否则{
返回fn.apply（这是参数）；
}
}
})（标记框。选择选项）；
}); 

---

示例：

看起来不错，唯一的错误是添加新标记时，单击事件处理程序不会附加到该标记上。我以为

on（）

是为此而构建的，但有些东西是不可用的。为此，您需要声明如下处理程序：$（document）；。这将注册所有创建的动态元素有限地尝试过，试图找出它不起作用的原因。将该逻辑置于document loadupdated fiddle之外：我曾考虑将其置于

ready（）

处理程序之外，但似乎仍然失败了