动态添加jQuery RateIt不起作用

我有一个MVC应用程序，在部分视图中的表单数据，通过Ajax填充。在这种形式下，我有一个select我需要一个星级评分系统。这是行不通的。动态添加jQuery RateIt不起作用

不起作用的是：我需要能够克隆选择和它的评分系统，以便我有两个选择与星级评价每个。（基本上添加项目）。

添加第一RateIt很简单：

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

花哨的部分都会自动呈现后。我已经封装选择和其评级由一个div，这样我就可以简单地创建像这样使用jQuery克隆：

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

之后，我要确保在克隆的所有ID进行更新，这样我可以正确识别每个零件。工作正常，至少对于选择。虽然评级系统不起作用。我的第二个RateIt伴随着我新创建的选择 - 但我无法设置任何值。所有盘旋导致第一个评级更新。

这里是我的两个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]); }); 
});

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

来源

2016-09-06 LocEngineer

如果添加多个，它是否仍然只会导致第一个评分更新？ – JB06

肯定。我只是测试了这一点，无论我添加了多少，它只会更新第一个。但是：在悬停时，“rateit-reset”按钮会突出显示，也就是说，如果我悬停第三个，则只有第三个悬停。我还检查了它是否仅仅是一个显示问题，但实际上只有第一个值才能保持一个值，即使点击了每个评级。 – LocEngineer

尝试拉出每个的rateit init并添加'$（'。rateit'）。rateit（）;' – JB06

得到它的工作。一个人不得将现有的RateIt留在克隆中，并尝试在那里修改ID。那么事件将不会被正确绑定。

必须从克隆删除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();

的Et就万事大吉了。

来源

2016-09-07 13:50:27 LocEngineer

动态添加jQuery RateIt不起作用

回答

相关问题