Question

当我将Jquery UI滑块元素克隆到另一个DIV时，当我移动克隆滑块移动原始滑块而不是克隆滑块时，它工作正常工作

HTML：

<div class="demo">
  <p>
    <label for="amount">Price range:</label>
    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
  </p>
  <div class="tool-options">
    <div id="slider-range" class="slider-range"></div>
  </div>
</div>
<div class="clones"></div>
<button type="button" onclick="reset_slider('.slider-range')">Reset</button>
<br>
<br>
<button type="button" onclick="clone_elem();">Clone</button>

JS：

$(function() {
    $( ".slider-range" ).slider({
        range: true,
        min: 0,
        max: 500,
        values: [ 75, 300 ],
        slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        }
    });
    $( "#amount" ).val( "$" + $( ".slider-range" ).slider( "values", 0 ) +
        " - $" + $( ".slider-range" ).slider( "values", 1 ) );
});

var reset_slider = function( slider_selector ){

    // Reset the sliders to their original min/max values 
    $( slider_selector ).each(function(){

      var options = $(this).slider( 'option' );

      $(this).slider( 'values', [ options.min, options.max ] );

    });  

};

var clone_elem = function(){
  // alert('hi');
    $(".tool-options").clone(true).appendTo(".clones");
};

JSbin example

如何将滑块移动动作附加到克隆元素？

Answer 1

正如@ G.L.P评论中所提到的，我已经使用jquery删除了滑块形式的克隆元素，并且在我创建了一个滑块并将其附加到所需元素后，它现在正如我预期的那样运行良好

修改后的JS代码

$(function() {
    $( ".slider-range" ).slider({
        range: true,
        min: 0,
        max: 500,
        values: [ 75, 300 ],
        slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        }
    });
    $( "#amount" ).val( "$" + $( ".slider-range" ).slider( "values", 0 ) +
        " - $" + $( ".slider-range" ).slider( "values", 1 ) );
});

    function CreateSlider(sliderdivID) {
    $("." + sliderdivID).slider({
         range: "min",
    });
    }

var clone_elem = function(){
  // alert('hi');
    var cloned= $(".tool-options").clone(true).appendTo(".clones");
    $(cloned).find('.slider-range').remove();

  var div = $("<div>", {  class: "slider-range" });
                $('.clones').after(div);
                CreateSlider($(div).attr('class'));
};

最后一个箱子：Bin

克隆元素时，Jquery UI滑块表现得很好

1 个答案: