twitter-bootstrap - jScrollpane 不适用于 Bootstrap 选择器刷新方法

Question

我尝试将 jScrollpane 自定义滚动条与 Bootstrap 选择器下拉列表集成。 当我们从下拉列表中删除任何选项元素并使用 selectpicker 刷新方法刷新它时/jScrollpane 滚动条停止工作。

请查看随附的演示链接以了解更多信息。让我知道解决方案。

演示网址:http://dropdown-test.iprojectlab.com/

jsFiddle 网址:https://jsfiddle.net/ztqq0mzs/8/

谢谢。

Answer 1

问题是当您在删除所选元素后尝试再次应用插件时，您的 jScrollpane 插件出现故障(不确定原因)。

另外让我指出您代码中的几个错误。

这段代码

$(document).delegate(".dropdown-toggle","click",function(){
    var jDropdown = $(this).siblings(".dropdown-menu").find("ul.dropdown-menu");
    jDropdown.jScrollPane();
});

1) 您为每个点击事件绑定(bind)插件，这是不好的方法。您需要确保只应用一次。

2) 您还使用委托(delegate)来绑定(bind)事件。这已被弃用，现在您必须使用 on 来绑定(bind)事件。

As of jQuery 1.7, .delegate() has been superseded by the .on() method. For earlier versions, however, it remains the most effective means to use event delegation. More information on event binding and delegation is in the .on() method. In general, these are the equivalent templates for the two methods:

---

我已经重构了你的代码，这就是你能做的。 <强> Working Fiddle

$(document).ready(function() {

  var jDropdown = $('#country').siblings(".dropdown-menu").find("ul.dropdown-menu");
  jDropdown.jScrollPane(); // bind event on document ready, and only once

  $(document).on("change", ".selectpicker", function() {
    var selectedIndex =  $('#country').prop('selectedIndex');
    $(this).siblings(".dropdown-menu").find("ul.dropdown-menu li[data-original-index='" + selectedIndex + "']").remove();
    // directly remove the li elements of the plugin, or you can even hide them.
  });
});

你的这个bug好像很有意思(我个人也花了一些时间debug)。