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

Question

我试图将自定义点击事件添加到我嵌入在select2处理程序中的图标上。 我没有添加默认的“ x”，而是添加了三个glyphicon图标，它们希望将自定义单击处理程序附加到该图标上，然后使用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/