使用“nice-select”jQuery 插件设置选择标签样式时，获取 .val() 选择标签 .on('change') 不起作用

Question

我在 html 中有一个普通的选择标签

<div>
 <select name="sort-by" id="sort-by" class="nice-select show-menu-arrow">
  <option value="sortby">Sort By..</option>
  <option value="Section">Section</option>
  <option value="Alphabetical">Alphabetical</option>
  <option value="Time">Time</option>
</select>

当我的表单中发生以下任一事件时，jQuery 中的以下代码将发送 AJAX 请求（使用 select 标记的 .val()）：选择标记更改、单击复选框或输入字符搜索栏。

$("#filter-words select,  #filter-words input[type='checkbox'], #filter-words input[type='text']").on('change keyup', function() {

var sortBy = $("#filter-words select#sort-by").val();

这段代码运行良好，直到我使用 jQuery 插件“nice-select”（http://hernansartorio.com/jquery-nice-select/）

使用此插件时， .on('change') 事件在 select 标签上不起作用。这样做的原因（我相信）是，根据 nice-select 页面（上面的链接），在使用插件时，这个：

<select>
  <option value="1">Some option</option>
  <option value="2">Another option</option>
  <option value="3" disabled>A disabled option</option>
  <option value="4">Potato</option>
</select>

变成这样：

<div class="nice-select">
  <span class="current">Some option</span>
  <ul class="list">
    <li class="option selected">Some option</li>
    <li class="option">Another option</li>
    <li class="option disabled">A disabled option</li>
    <li class="option">Potato</li>
  </ul>
</div>

所以我的问题是：

我怎样才能解决这个问题？根据这个问题（当我将 Dropkick 或 MultiSelect 插件添加到样式 Select 元素时，更改功能停止工作）选择标签插件 DropKick 和 MultiSelect 有这个文档，但我似乎无法找到关于这个问题的任何文档。

Answer 1

It appears that nice-select is copying the original select using jQuery's .html() function, so any bindings attached to the original select will be broken. You can get around this by using delegated event binding...

It needs to point to a wrapper around the select. For example

<div class="wrapper">
  <select id="sort-by">
    ...
  </select>
</div>

then use the following code to bind to the select:

$(".wrapper").on('change', 'select', function() {
  var sortBy = $("#sort-by").val();
  // do whatever with the value
});