Question

我有一个div（#grouped_tests）通过ajax填充。然后我在数据加载时将jScrollPane分配给该div。但是，jscrollpane仅在第一次点击.group_test时有效，而不是在后续点击时有效。每次点击.group_test时，我需要添加什么才能使jScrollPane正常工作？

 $('.group_test').click(function() {
                $.ajax({
                    type: "POST",
                    url: "scripts/get_grouped_tests.php",
                    data: {
                        group_test: $(this).attr('data-grouptest')
                    },
                    success: function(data) {
                        $('#grouped_tests').html('<p>' + data + '</p>');
                        $('#grouped_tests').jScrollPane({
                            autoReinitialise: true,
                            verticalDragMinHeight: 20,
                            verticalDragMaxHeight: 20
                        });
                    }
                });
            });

Answer 1

我在http://jscrollpane.kelvinluck.com/destroy.html的jScrollPane文档中解决了这个问题。我需要补充一下：

$('#grouped_tests').jScrollPane().data().jsp.destroy();

这会清除jScrollPane的实例，以便可以在数据加载时重新实现它：

 $('.group_test').click(function() {
                $('#grouped_tests').jScrollPane().data().jsp.destroy();
                $.ajax({
                    type: "POST",
                    url: "scripts/get_grouped_tests.php",
                    data: {
                        group_test: $(this).attr('data-grouptest')
                    },
                    success: function(data) {
                        $('#grouped_tests').html('<p>' + data + '</p>');
                        $('#grouped_tests').jScrollPane({
                            autoReinitialise: true,
                            verticalDragMinHeight: 20,
                            verticalDragMaxHeight: 20
                        });
                    }
                });
            });

jScrollPane仅在第一次使用AJAX加载的内容时工作

1 个答案: