Question

我尝试将jScrollpane自定义滚动条与bootstrap select picker下拉列表集成。 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).

jScrollpane不使用bootstrap selectpicker刷新方法

1 个答案: