動態添加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不起作用

回答

相關問題