jQuery select2不能在自定义模板中添加click事件

jQuery select2 cannot add click event to custom template

本文关键字：添加 click 事件 select2 不能 自定义 jQuery      更新时间：2023-09-26

我试图将自定义单击事件添加到我嵌入在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/

不幸的是，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/

相关文章：