Добавить функциональность слайдера для динамически создаваемых объектов

Question

Я использую метод .clone () для создания копий коллекции вложенных элементов каждый раз, когда пользователь нажимает кнопку.

Однако в каждой группе элементов мне нужен слайдер, который будет прикреплятьк функциональности слайда, но которая должна только изменять значение элементов в этой конкретной коллекции.

Как создать новый экземпляр слайдера для каждой созданной коллекции.

Приведенный ниже код работает дляжестко закодированный слайдер с идентификатором «value-slider», но мне нужен приведенный ниже код для работы с каждым экземпляром клонированного слайдера.

Спасибо за вашу помощь

$(function() {
    $( "#value-slider" ).slider({
        orientation: "horizontal",             
        value:100,
        min: 0,
        max: 1000,
        step: 50,
        slide: function( event, ui ) {
            alert($(this).attr("id"));
            $( ".amount" ).val( "£" + ui.value + " - £" + (ui.value + 100) );
            $( ".price" ).text( "£" + (ui.value / 19).toFixed(2)  );
            $( ".i-price" ).text( "£" + (ui.value / 19).toFixed(2)  );
        }
    });
    $( ".amount" ).val( "£" + $( ".value-slider" ).slider( "value" ) + " - £" + ($( ".value-slider" ).slider( "value" ) + 100) );
});

Разметка элемента, который должен быть клонирован, ниже (обратите внимание, что слайд является просто потомком клонированного элемента:

<div id="template" class="basket-item group hide" style="display:none;">
  <div class="basket-item-icon"><img /></div>
  <div class="basket-item-details"> </div>
  <div class="basket-item-slider">
    <div style="width:20px; font-weight:bold; float:left;color:#F6931F; ">£0</div>
    <div class="value-slider" style="width:140px; float:left; margin-right:10px;"></div>
    <div style="width:30px; font-weight:bold; float:left;color:#F6931F; ">£1000</div>
  </div>
  <div class="basket-item-value">Value:
    <input type="text" class="amount" style="margin:2px 0; color:#f6931f; font-weight:bold; width:90px;" />
  </div>
  <div class="basket-item-cover-price">Our Price:<br />
    <span class="i-price" style="font-size:24px; color:#F6931F;">£x.xx</span> </div>
</div>

Answer 1

Я бы создал функцию, которая принимает элемент и присоединяет ползунок:

function addSlider(element) {
   var slider = $('.value-slider', element).slider({
        orientation: "horizontal",             
        value:100,
        min: 0,
        max: 1000,
        step: 50,
        slide: function( event, ui ) {
            $( ".amount", element).val( "£" + ui.value + " - £" + (ui.value + 100) );
            var price = "£" + (ui.value / 19).toFixed(2);
            $( ".price", element).text(price);
            $( ".i-price", element).text(price);
        }
    });
    $( ".amount", element).val( "£" + slider.slider( "value" ) + " - £" + (slider.slider( "value" ) + 100) );
}

(Предполагая, что .amount, .price и т. Д. Являются потомками элемента, к которому вы добавляете ползунок. Возможно, вам придется настроить это. Невозможно предоставить полностью правильное решение, не зная HTML структура)

Затем, когда вы клонируете элемент, вы просто передаете клон функции:

var clone = $('some selector').clone();
addSlider(clone.get(0));

---

В качестве альтернативы вы можете попробовать клонировать элемент с помощью clone(true), который также клонирует обработчики событий и данные, связанные с элементом.