jScrollpane不能使用引导selectpicker刷新方法

Question

我试图将jScrollpane自定义滚动条与引导选择选择器下拉列表集成在一起。 When we remove any option element from dropdown and refresh it using selectpicker refresh method/ jScrollpane scrollbar stopped working。

请看附加的演示链接以获取更多的想法。让我知道解决方案。

演示网址：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）你要绑定的插件每次点击的事件，这是一个不错的方法。你需要确保你只应用一次。

2）此外，您正在使用delegate来绑定事件。这已被弃用，现在您必须使用on来绑定事件。

从jQuery 1.7开始，.delegate（）已被.on（）方法取代。然而，对于较早的版本，它仍然是使用事件委派的最有效手段。有关事件绑定和委派的更多信息，请参阅.on()方法。在一般情况下，这些都是这两种方法相当于模板：

---

我已经重构你的代码，这是你可以做什么。 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. 
    }); 
}); 

This bug of yours seemed very interesting (I personally spent some time debugging this).