javascript - Selectize 上的 jQuery 工具提示

Question

我正在尝试在 Selectize ( http://brianreavis.github.io/selectize.js/ ) 选择框上添加 jQuery 工具提示，但由于某种原因我遇到了一些问题。

这是我的代码片段:

$(function() {

  $("#myDropdown").selectize({
    onChange: function(value) {
      var ddOptions = {
        1: triggerOpt1,
        2: triggerOpt2,
        3: triggerOpt3,
        4: triggerOpt4
      };

      ddOptions[value]();
    },
    render: {
      option: showItem,
      item: showItem
    }
  });

  $("#myDropdown .ddOption").tooltip({
    position: "bottom left",
    offset: [-2, 10],
    opacity: 0.9
  });

});

function showItem(data) {
  return Handlebars.templates["dropdown"]({
    itemClass: data.value,
    label: data.text,
    title: I18n["ddOption_" + data.value]
  });
}

<select id="myDropdown">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>

由于某种原因，我没有得到 jQuery 工具提示，而是得到了 native 浏览器工具提示。当我尝试在控制台中附加工具提示时，它工作正常..

有人遇到过这个问题吗？

编辑:类 ddOption 正在添加到 Handlebars 模板中的选择项目中。

Answer 1

我不了解 Selectize，但我知道它是基于 jQuery-ui 的 selectmenu，我也遇到过同样的问题。

根本原因是 jquery-UI 隐藏了实际的 select 元素，并使用其他 html 构建了一个全新的元素，模拟它并将其值同步到原始 select 标签。

因此，如果您捕获它，例如通过它的 id 或类来执行任何操作，您最终会修改隐藏元素。

您应该使用 ui-selectmenu-button 类来搜索同级跨度。但最好使用您喜欢的浏览器检查器来查看它的实际属性，使用 selectize 插件。