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将只提供关于被点击，因为它不支持嵌套元素的元素信息（元素等比李 - 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/