如何在选择框中捕获悬停事件

时间:2016-03-25 15:33:35

标签: javascript jquery event-handling selectize.js

我正在使用Brian Reavis出色的Selectize.js为我的选择输入添加功能。

但是当用户将鼠标悬停在选择性选项上方时,我正在努力添加事件处理程序。我可以看到API中没有记录此类事件的事件。

我可以看到,selectize创建了自己的div这样的

<div data-value="my value" data-selectable="" class="option">my label</div>

当我将鼠标移到每个选项上时,该类将从

更改

class =“option”to class =“option active”再返回。

但是我无法看到一种方法来为这些事件添加自己的处理程序。请有人帮忙。

非常感谢

艾力

1 个答案:

答案 0 :(得分:5)

mouseenter

内的div上使用.selectize-dropdown-content

&#13;
&#13;
$('.selectize-control').on('mouseenter', '.selectize-dropdown-content div', function() {
  alert($(this).text())
});
&#13;
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.min.js"></script>

<div class="control-group">
  <select id="select-beast" class="demo-default" placeholder="Select a person...">
    <option value="">Select a person...</option>
    <option value="4">Thomas Edison</option>
    <option value="1">Nikola</option>
    <option value="3">Nikola Tesla</option>
    <option value="5">Arnold Schwarzenegger</option>
  </select>
</div>
<script>
  $('#select-beast').selectize({
    maxItems: 3
  });
</script>
&#13;
&#13;
&#13;