jQuery select2がカスタムテンプレートにクリックイベントを追加できない

Question

私はselect2ハンドラに埋め込まれたアイコンにカスタムクリックイベントを追加しようとしています。デフォルトの「x」を使用する代わりに、カスタムクリックハンドラをアタッチし、そこからselect2イベントAPIを使用してアクションを取る3つのグリフアイコンアイコンを追加しました。

私は実際のタグをクリックするとこのように見えますが、個々のアイコンには表示されません。

マイ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/