Динамически добавленная скорость jQueryIt не работает

Question

У меня есть приложение MVC с данными формы в частичном представлении, заполненном через Ajax. В этом виде у меня есть select, для которого мне нужна рейтинговая система.

это делает работа.

Что не работает: мне нужно иметь возможность клонировать как систему выбора, так и свою рейтинговую систему, чтобы у меня тогда было два выбора со звездным рейтингом. (Добавить элемент, в основном).

Добавление первого RateIt довольно прост:

<span class="rateit" id="rateit0"></span> 

Причудливые части получают оказанные автоматически позже. Я инкапсулированные выбрать и его рейтинг по в DIV, так что я могу просто создать клон с JQuery, как это:

var klon = $(item).closest('div').clone(true); 

После этого я убеждаюсь все идентификаторы в клоне обновляются, так что я могу правильно определить каждый компонент. Отлично работает, по крайней мере, для выбора. Не работает система рейтинга. Я получаю второй RateIt, сопровождающий мой недавно созданный select - но я не могу установить какое-либо значение. Все зависание вызывает первый рейтинг для обновления.

Вот что два моих RateIts выглядеть после клонирования:

<span class="rateit" id="rateit0"> 
    <button id="rateit-reset-2" type="button" data-role="none" class="rateit-reset" aria-label="reset rating" aria-controls="rateit-range-2"></button> 
    <span aria-readonly="false" style="width: 80px; height: 16px;" id="rateit-range-2" class="rateit-range" tabindex="0" role="slider" aria-label="rating" aria-owns="rateit-reset-2" aria-valuemin="0" aria-valuemax="5" aria-valuenow="0"> 
    <span id="select0" class="rateit-selected" style="height: 16px; width: 0px;"></span> 
    <span id="hover0" class="rateit-hover" style="height: 16px; width: 0px; display: none;"></span> 
    </span> 
</span> 

и

<span class="rateit" id="rateit1"> 
    <button id="rateit-reset-21" type="button" data-role="none" class="rateit-reset" aria-label="reset rating" aria-controls="rateit-range-21"></button> 
    <span aria-readonly="false" style="width: 80px; height: 16px;" id="rateit-range-21" class="rateit-range" tabindex="1" role="slider" aria-label="rating" aria-owns="rateit-reset-21" aria-valuemin="0" aria-valuemax="5" aria-valuenow="0"> 
    <span id="select1" class="rateit-selected" style="height: 16px; width: 0px;"></span> 
    <span id="hover1" class="rateit-hover" style="height: 16px; width: 0px; display: none;"></span> 
    </span> 
</span> 

Вот, я догадался, что должно быть адаптировано и поселились на aria-owns и aria-controls, а также идентификаторами ,

После клонирования будет сделано, я делаю вывод, активизируя RateIts (или, по крайней мере, так я думаю) и связать всплывающие подсказки:

$('.rateit').each(function() { 
    $(this).rateit(); 
    $(this).bind('over', function (event, value) { $(this).attr('title', tooltipvalues[value - 1]); }); 
}); 

Может кто-нибудь сказать мне, что я делаю неправильно?

Answer 1

Получил это работу. Не нужно оставлять существующий RateIt в клоне и пытаться адаптировать идентификаторы там. Тогда события не будут должным образом связаны.

Вы должны удалить RateIt из клона, добавлять/вставить свежий, инициализированы промежуток RateIt в правильном положении и инициализировать его:

var klon = $(item).closest("div").clone(true); 
var tmp = $(klon).find("select").each(function() { 
      $(this).attr({ 
        'id': function (_, id) { return id.replace(oldnum, newnum) }, 
        'name': function (_, name) { return name.replace(oldnum, newnum) } 
       }); 
    }).end(); 
tmp.find(".rateit").each(function() { 
     $(this).remove(); 
    }).end(); 

$(item).closest("td").append(tmp); 
    $('<span class="rateit" id="rateit' + newnum + '" data-rateit-step="1"></span>').insertAfter("#Subject" + newnum); 
    $("#rateit" + newnum).rateit(); 

вуаля.