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/

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

1 个答案: