Jquery UI滑块旋钮消失

Question

I am messing with slider's trying to get them to do a few things but for some reason I have encountered this bug and can't for the life of me figure it out at all.

If you look at the code below - when I click a specific element it clones itself and adds a slider. That all works.

But when I include my custom function it all still works and the function works but the slider's knob vanishes except from the most recently added slider.

I have also disabled my stylesheet & other JS file's to make sure there is no clash.

---

Update

Here is the html output after click that I am receiving.

 <ul id="mixers"> <li> <div class="align-table"> <div class="color-img t-align"> <img> </div> <div class="t-align"> <div class="percent-mix ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"></div> <div class="mix-value">0</div> </div> </div> </li> <li> <div class="align-table"> <div class="color-img t-align"> <img> </div> <div class="t-align"> <div class="percent-mix ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"> <div class="ui-slider-range ui-widget-header ui-slider-range-max" style="width: 0%;"></div> <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 100%;"></a> </div> <div class="mix-value">0</div> </div> </div> </li> </ul>

As you can see the entire knob get's taken out of the html.

---

Any idea's?

 jQuery(document).ready(function($) { function slideumus() { var sliders = $("#mixers .percent-mix"); var availableTotal = 100; sliders.each(function() { var init_value = 0; $(this).siblings('.mix-value').text(init_value); $(this).empty().slider({ value: init_value, min: 0, max: availableTotal, range: "max", step: 1, animate: 0, slide: function(event, ui) { // Update display to current value $(this).siblings('.mix-value').text(ui.value); // Get current total var total = 0; sliders.not(this).each(function() { total += $(this).slider("option", "value"); }); total += ui.value; var delta = availableTotal - total; // Update each slider sliders.not(this).each(function() { var t = $(this), value = t.slider("option", "value"); var tn = $("#mixers li").length; var tntr = (tn - 1); var new_value = value + (delta / tntr); if (new_value < 0 || ui.value == 100) new_value = 0; if (new_value > 100) new_value = 100; t.siblings('.mix-value').text(new_value); t.slider('value', new_value); }); } }); }); } function spinit() { var imager = function() { return $('.color-img img').attr('src'); } $('.place img').attr("src", imager()); } function blendit() { var range = $(".percent-mix").slider({ min: 0, max: 100, step: 1 }), slideme = $(".percent-mix"), places = $(".place"); slideme.slider('option', 'change', function(e) { // set `.place` `div` `html` to empty string places.each(function() { this.innerHTML = "" }); // `range` value cast to `Number` 100 , or decimal if less than 100 var r = Number(range.slider("option", "value") === 100 ? range.slider("option", "value") : "0." + range.slider("option", "value")); // round `r` var p = Math.round(r === 100 ? r : places.length * r); if (p !== 100) { for (var i = 0; i < p; i++) { // `j` : "random" `.place` var j = Math.floor(Math.random() * places.length); // if `.place` at index `j` `.html().length ==== 0` , // append to `.place` at index `j` if (places.eq(j).html().length === 0) { places.eq(j).html('<img width="33" height="33" src="" class="attachment-thumb-blend wp-post-image" alt="Tile">') } // else , filter `.place` , return `s` `.place` `div` elements // having `innerHTML.length === 0`, // select "random" index from `s` , // append to `.place` at index `Math.random() * s.length` else { var s = places.filter(function() { return this.innerHTML.length === 0 }); s.eq(Math.floor(Math.random() * s.length)).html('<img width="33" height="33" src="" class="attachment-thumb-blend wp-post-image" alt="Tile">') } }; } else { places.html(function() { return '<img width="33" height="33" src="" class="attachment-thumb-blend wp-post-image" alt="Tile">' }) } spinit() }); range.slider("value", 100).trigger("slide"); slideme.trigger("change"); var len = places.filter(function() { return this.innerHTML.length > 0 }); console.log(len.length); // `49` } $(function() { $(".blend-tile").click(function() { var li = $('<li><div class="align-table"><div class="color-img t-align"></div><div class="t-align"><div class="percent-mix"></div><div class="mix-value"></div></div></div></li>'); $("#mixers").append(li); slideumus(); $('#mixers li:first .percent-mix').bind(blendit()); $(".tpic", this).clone(true, true).contents().appendTo(li.find('.color-img')); }); }); //function slideumus() { //$('ul.mixers li .t-align .percent-mix').slider({ //slide: function( event, ui ) { // $( "ul.mixers li .t-align .mix-value" ).html( ui.value ); //}}).linkedSliders(); //$('ul.mixers li:first .t-align .percent-mix').slider('value', 100); //var val = $('ul.mixers li .t-align .percent-mix').slider("option", "value"); //} });

 <link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> <li class="blend-tile align num-<?php echo $i++; ?>"> <div class="tpic"> <img> </div> </li> <ul id="mixers"> </ul>

Answer 1

<html>
<head>

  <!-- Load jQuery and jQuery UI -->
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

  <!-- Load the jQuery UI CSS -->
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />


  <!-- jQuery UI Slider code -->
  <script>

  // When the browser is ready...
  $(function() {

    // Create a new jQuery UI Slider element
    // and set some default parameters.
    $( "#slider" ).slider({
      range: "min",
      value: 50,
      min: 0,
      max: 100,
      slide: function( event, ui ) {

        // While sliding, update the value in the #amount div element
        $( "#amount" ).html( ui.value );

      }
    });

    // Set the initial slider amount in the #amount div element
    var value = $( "#slider" ).slider( "value" );
    $( "#amount" ).html( value );

  });

  </script>


</head>
<body>

  <!--  The div that is used as the slider container  -->
  <div id="slider" style="margin-top:100px;"></div>

  <!--  The div that is used to display the slider value  -->
  <div id="amount" style="color:#777;font-size:72px;text-align:center;"></div>

</body>
</html>

this is the code I got from here: http://code.runnable.com/UY1MFCr81yhCAAAH/how-to-use-the-jquery-ui-slider
If you want to see the output: http://code.runnable.com/VYz2pDPDZ3BlL0AO/output

Answer 2

Turn's out it was $(this).empty().slider({

Taking away .empty() solved the problem.