在select2下拉菜单中不会触发Mousedown事件

时间：2018-08-23 08:31:46

标签： javascript jquery html jquery-select2

我想向select2列表中添加一些可点击的选项，但似乎它删除了mousedown事件。请尝试下面的代码段，然后单击1、2、3中的一个。为什么警报没有打开？

$(".form-control").select2({
  templateResult: formatSelect2,
});

function formatSelect2 (data) {
  if (!data.id) { return data.text; }
  var $data = $(
    '<span data-status="' + data.element.getAttribute("data-status") + '">' + data.text + '<span class="statuses"><span data-status="1">1</span><span data-status="2">2</span><span data-status="3">3</span></span></span>'
  );
  return $data;
};

$(document).on('mousedown', '.statuses span', function(e) {
  alert('Why isn\'t this opening?');
});
.statuses {
  margin-left: 8px;
}
.statuses span {
  margin-left: 8px;
  cursor: pointer;
}
.statuses span:hover {
  margin-left: 8px;
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select class="form-control" style="width: 300px">
  <option selected="selected" data-status="1">orange</option>
  <option>white</option>
  <option>purple</option>
</select>

1 个答案:

答案 0 :(得分：1)

是的，您是对的。 Select2 确实删除了下拉容器中的事件。这是库中执行此操作的行：

this.$dropdownContainer.on('mousedown', function (evt) {
  evt.stopPropagation();
});

解决方案：

  1. 获取select2的实例
  2. 使用jQuery closest绑定事件并检查鼠标是否位于状态的范围上。

方法如下：

var selectInst = $(".form-control").data('select2');

selectInst.$results.on('mousedown', function (e) {
   if($(e.target).closest('.statuses span').length) {
     var data = $(e.target).parents('li[aria-selected]').data('data').text || null; 
     alert('Clicked \"' + $(e.target).html() + '\" from the value: ' + data);   
   }
});

将以上内容放在一起，下面是一个片段：

$(".form-control").select2({
  templateResult: formatSelect2,
});

var selectInst = $(".form-control").data('select2');

selectInst.$results.on('mousedown', function (e) {
	if($(e.target).closest('.statuses span').length) {
  	var data = $(e.target).parents('li[aria-selected]').data('data').text || null; 
  	alert('Clicked \"' + $(e.target).html() + '\" from the value: ' + data);	
  }
});

function formatSelect2 (data) {
  if (!data.id) { return data.text; }
  var $data = $(
    '<span data-status="' + data.element.getAttribute("data-status") + '">' + data.text + '<span class="statuses"><span data-status="1">1</span><span data-status="2">2</span><span data-status="3">3</span></span></span>'
  );
  return $data;
}
.statuses {
  margin-left: 8px;
}
.statuses span {
  margin-left: 8px;
  cursor: pointer;
}
.statuses span:hover {
  margin-left: 8px;
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>
<select class="form-control" style="width: 300px">
  <option selected="selected" data-status="1">orange</option>
  <option>white</option>
  <option>purple</option>
</select>

编辑：

对于select2的多个实例，这是一种方法：

对所有实例应用上述相同的逻辑。

我向要为其初始化select2的所有选择添加了一个类 render_select2 。使用该类，可以将以上内容应用于所有实例：

$(".render_select2").each(function () { 
  var selectInst = $(this).data('select2');
  selectInst.$results.on('mousedown', function (e) {
    if($(e.target).closest('.statuses span').length) {
      var data = $(e.target).parents('li[aria-selected]').data('data').text || null; 
      alert('Clicked \"' + $(e.target).html() + '\" from the value: ' + data);  
    }
  });
});


$(".form-control").select2({
  templateResult: formatSelect2,
});

$(".render_select2").each(function () { 
	var selectInst = $(this).data('select2');
	selectInst.$results.on('mousedown', function (e) {
    if($(e.target).closest('.statuses span').length) {
      var data = $(e.target).parents('li[aria-selected]').data('data').text || null; 
      alert('Clicked \"' + $(e.target).html() + '\" from the value: ' + data);	
    }
	});
});

function formatSelect2 (data) {
  if (!data.id) { return data.text; }
  var $data = $(
    '<span data-status="' + data.element.getAttribute("data-status") + '">' + data.text + '<span class="statuses"><span data-status="1">1</span><span data-status="2">2</span><span data-status="3">3</span></span></span>'
  );
  return $data;
}
.statuses {
  margin-left: 8px;
}
.statuses span {
  margin-left: 8px;
  cursor: pointer;
}
.statuses span:hover {
  margin-left: 8px;
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>
<select class="form-control render_select2" style="width: 300px">
  <option selected="selected" data-status="1">orange</option>
  <option>white</option>
  <option>purple</option>
</select>

<select class="form-control render_select2" style="width: 300px">
  <option selected="selected" data-status="1">orange1</option>
  <option>white1</option>
  <option>purple1</option>
</select>

编辑2：避免each并使用select2:select事件：

使用内置事件，这里是更改：

$(".form-control").on('select2:select', function (evt) {
    var origEvent = evt.params.originalEvent;
    if($(origEvent.target).closest('.statuses span').length) {
      var data = $(origEvent.target).parents('li[aria-selected]').data('data').text || null; 
      alert('Clicked \"' + $(origEvent.target).html() + '\" from the value: ' + data);  
    }
});


$(".form-control").select2({
  templateResult: formatSelect2,
});

$(".form-control").on('select2:select', function (evt) {
	var origEvent = evt.params.originalEvent;
	    if($(origEvent.target).closest('.statuses span').length) {
      var data = $(origEvent.target).parents('li[aria-selected]').data('data').text || null; 
      alert('Clicked \"' + $(origEvent.target).html() + '\" from the value: ' + data);	
    }
});

function formatSelect2 (data) {
  if (!data.id) { return data.text; }
  var $data = $(
    '<span data-status="' + data.element.getAttribute("data-status") + '">' + data.text + '<span class="statuses"><span data-status="1">1</span><span data-status="2">2</span><span data-status="3">3</span></span></span>'
  );
  return $data;
}
.statuses {
  margin-left: 8px;
}
.statuses span {
  margin-left: 8px;
  cursor: pointer;
}
.statuses span:hover {
  margin-left: 8px;
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>
<select class="form-control render_select2" style="width: 300px">
  <option selected="selected" data-status="1">orange</option>
  <option>white</option>
  <option>purple</option>
</select>

<select class="form-control render_select2" style="width: 300px">
  <option selected="selected" data-status="1">orange1</option>
  <option>white1</option>
  <option>purple1</option>
</select>

希望这会有所帮助（顺便说一句，我已经使用v4.5了，因为v4.6-rc似乎处于测试阶段）

相关问题
最新问题