Question

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

这确实有用。

什么行不通：我需要能够克隆选择及其评级系统，以便我有两个选项，每个选项都有一个星级。（基本上添加项目。）

添加第一个RateIt非常简单：

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

花哨的部件会在以后自动渲染。我已经用div封装了select和它的评级，所以我可以像这样用JQuery创建克隆：

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

之后，我确保克隆中的所有ID都已更新，以便我可以正确识别每个组件。工作正常，至少对于选择。什么不起作用的是评级系统。我确实得到了第二个RateIt伴随我新创建的选择 - 但我无法设置任何值。所有悬停都会导致 first 评级更新。

这是克隆后我的两个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以及ID上进行调整和确定的内容。

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

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

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

Answer 1

搞定了。一个人不能将现有的RateIt留在克隆中并尝试在那里调整ID。那时事件将不会被正确绑定。

您必须从克隆中删除RateIt，在正确位置追加/插入新的，单位化的RateIt范围并初始化它：

        angular.forEach($scope.openRequests, function (obj, i) {
        obj.RequestDate = $filter('date')(obj.RequestDate.replace('/Date(', '').replace(')/', ''), "MM/dd/yyyy hh:mm a");
        obj.LastActionTaken = $filter('date')(obj.LastActionTaken.replace('/Date(', '').replace(')/', ''), "MM/dd/yyyy hh:mm a");
        obj.StartDate = $filter('date')(obj.StartDate.replace('/Date(', '').replace(')/', ''), "MM/dd/yyyy");
    });

Etvoilà。

动态添加jQuery RateIt不起作用

1 个答案: