javascript - Nouislider上的ajax调用问题

Question

我在同一页面上有多个滑块，我将它们初始化如下：

$(".percentage-slider").each(function (index, slider) {
    var url = $(this).data('ajax-url');
    var value = $(this).data('value');

    noUiSlider.create(slider, {
        start: value,
        connect: "lower",
        step: 1,
        range: {
            min: 0,
            max: 100
        },
        pips: {
            mode: 'range',
            density: 3
        }
    });

    slider.noUiSlider.on('change', function (values, handle) {
        save(url, {
            'name': 'percentage',
            'value': values[handle]

        });
    });
});

问题是我有一个模态窗口的ajax调用，它有其他一堆新的滑块......

Modal.open($('#ajax-modal'), $(this).attr('href'), function () {
                            $(".percentage-slider").each(function (index, slider) {
                                var url = $(this).data('ajax-url');
                                var value = $(this).data('value');

                                $(slider).destroy();
                                noUiSlider.create(slider, {
                                    start: value,
                                    connect: "lower",
                                    behaviour: 'tap',
                                    step: 1,
                                    range: {
                                        min: 0,
                                        max: 100
                                    },
                                    pips: {
                                        mode: 'range',
                                        density: 5
                                    }
                                });

                                slider.noUiSlider.on('change', function (values, handle) {
                                    save(url, {
                                        'name': 'percentage',
                                        'value': values[handle]

                                    });
                                });
                            });
                        });

总是当我调用模态时，滑块不会出现，我试图在 ajax 调用的回调事件中初始化它们，但后来我得到一个错误 Slider is already initialized.. 在寻找这个错误后我发现我需要销毁它们，但是我该如何处理这种情况呢？PS：我真的不喜欢在模态上复制和粘贴相同代码的想法......如果有人能有更好的解决方案，我将不胜感激。

感谢大家