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 呼び出しのコールバック イベントでスライダーを初期化しようとしましたが、スライダーが既に初期化されているというエラーが発生しました。それらを破壊する必要がありますが、この種の状況をどのように処理できますか? PS:モーダルに同じコードをコピーして貼り付けるというアイデアは本当に好きではありませんでした...誰かがより良い解決策を持っているなら、私はそれを感謝します.

みんな、ありがとう