0

I have a list of items which need to be re-categorised depending on what the user decides.

<li class="indent_padd" data-show-question="53"  data-tech-id="1" data-step-id="1" data-show-answers="1">
    <p>
        <span class="sub_step_title">
            Example question text
        </span>
    </p>
    <div class="slidecontainer">
        <div class="slide_checkcontainer">
            <div class="bs_sliders elRes" id="54_slider"></div>
            <script>
            $(document).ready(function(){
                var slider_54_slider = document.getElementById('54_slider');

                noUiSlider.create(slider_54_slider,{"start":0,"range":{"min":0,"max":100},"steps":4,"connect":"lower","direction":"ltr","orientation":"horizontal","pips":{"mode":"steps","stepped":"true","density":4}});

                // Set one handled slider
                slider_54_slider.noUiSlider.set(0);

                slider_54_slider.noUiSlider.on('update',function(values){
                    $('#result_54_slider').val(values[0]);
                })
            })
            </script>
            <input type="text" value="0" id="result_54_slider" class="rangeUpdate" data-toggle="popover" data-trigger="manual" data-content="The permitted value range is 0-100"  />
        </div>
        <div class="radio_container hasSlider">
            <input type="checkbox" name="steps[54_4]" value="4"  id="id_54_4" class="elRes" />
        </div>
    </div>
</li>

I then later run the following JS:

$('li[data-type="'+core_row+'"]').each(function(){
    var thisID = $(this).data('typeid');
    var newList = $(this).find('ul');

    $(newList).empty();

    var bringIn = $('li[data-'+get_items+'-id="'+thisID+'"]');

    $(bringIn).each(function(){
        $(newList).append($(this).clone(true,true));
        $(this).remove();
    })
})

I am using a slider (alt HTML range) as the question and had previously tried Bootstrap-slider (Destroy and re-initialize a bootstrap-slider) believing it was an issue with the slider code. I have since amended the code to use https://refreshless.com/nouislider/).

So what isn't working?? Basically in both instances the sliders lose their attached events - typically these relate to mouse actions as its a drag required. So why, when I'm using deep, deep cloning (and jq 3.5.1) are these events not being copied across when cloned? I would have expected to literally be able to "move" the LI and its entire contents/objects/variables etc and it work. If cloning isnt the answer - what is the best way of doing it?

If it makes a difference - the UL is hidden when it is appended to.

Antony
  • 3,875
  • 30
  • 32
  • Even if the events get cloned, that must not necessarily mean everything will still work afterwards with the cloned elements. The library might rely on other info outside of that, on the relation elements have to each other in the DOM, whatever, whoknows. Try and use the `destroy` method, and then initialize the slider(s) anew, after you cloned and inserted your new elements. – CBroe Jul 22 '20 at 09:36
  • I tried destroy on the bootstrap slider and that still didn't work unfortunately. It looks like a default behaviour because both sliders experienced the same issues. – Antony Jul 22 '20 at 09:40

0 Answers0