Javascript Nouislider上的ajax调用问题

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

$(".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调用的回调事件中初始化它们，但随后我得到一个错误，滑块已经初始化。。在寻找这个错误之后，我发现我需要销毁它们，但是我如何处理这种情况呢？ 附言：我真的不喜欢把相同的代码复制粘贴到modal上的想法。。。如果有人能有更好的解决方案，我将不胜感激

谢谢大家