动态添加 jQuery RateIt 不起作用

Question

我有一个 MVC 应用程序，在部分视图中包含表单数据，通过 Ajax 填充。在这个表单中，我有一个 select，我需要一个星级评分系统。

确实有效。

不起作用的是：我需要能够克隆 select 及其评级系统，这样我就有两个 select，每个都具有星级。（基本上是添加项目）。

添加第一个 Rate 非常简单：

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

花哨的部分稍后会自动渲染。我已经用 div 封装了 select 及其评级，所以我可以像这样用 JQuery 简单地创建克隆：

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

之后，我确保克隆中的所有 ID 都已更新，以便我可以正确识别每个组件。工作正常，至少对于 select。但不起作用的是评级系统。我确实得到了第二个 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以及ids需要适配和解决的问题

克隆完成后，我通过激活 RateIts（或者至少我认为如此）并绑定工具提示来结束：

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

谁能告诉我我做错了什么？

Answer 1

成功了。不能将现有的 RateIt 留在克隆中并尝试在那里调整 ID。届时事件将无法正确绑定。

您必须从克隆中删除 RateIt，append/insert 一个新的、未初始化的 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();

Et voilà.

动态添加 jQuery RateIt 不起作用

Dynamically added jQuery RateIt not working

ajax

asp.net-mvc

jquery

partial-views

rating-system