添加輸入文本和rateit星星也jsfiddle javascript不工作

Question

我想添加一行到2單元格的表。 單元1：從輸入字段中的文本 小區2：rateit星級ratting 這裏是我的HTML：

<div> 
<button type="button" id="cl" onclick="checkit()">Check I'm working</button> 
</div>  
<p><b> Please enter an item, rate it, and click <i>Add to Remedy</i>thanks</b></p> 
<div class="form-group"> 
     <div> 
    <label id="inp-title" class="control-label" for="formInput1">Field label</label> 
<input type="text" class="form-control" id="formInput1" placeholder="Placeholder text"> 
</input> 
     </div> 
     <div> 
       <div id="rateit_id" class="rrateit"></div> 
     </div><br><br> 
<button type="button" id="add-to-remedy" class="btn btn-default">Add to Remedy</button> 
<div> 
    <table class="table" id="remedy-tbl"> 
     <thead> 
      <tr> 
       <th>Remedy Item</th> 
       <th>Item Rating</th> 
      </tr> 
     </thead> 
     <tbody> 
     </tbody> 
    </table> 
</div> 

，這裏是我的JQuery：

 $(document).ready(function() { 
    var rate-val= 0; 
$('div#rateit_id').rateit(); 
    function checkit(){ 
      alert("HELLO WORLD!"); 
        }; 

$("#rateit_id").click(function() { 
    rate-val = ($(this).rateit('value')); 
        });         

$("#add-to-remedy").click(function() 
    { 
    var htmlToAppend =       
'<tr><td>' + $('input[type=text].form-control').val() + '</td><td>' +    
'<div class="rateit" data-rateit-value="' + rate-val +  
'" data-rateit-ispreset="true" data-rateit-readonly="true"></div>' + '</td></tr>'; 
     $("#remedy-tbl").append (htmlToAppend);     
     newTableRow.appendTo("#remedy-tbl"); 
      }); 
    }); 

，這裏是無法運作的http://jsfiddle.net/gZ9by/8/我理解的jsfiddle問題是JavaScript的不工作，但我不知道爲什麼。幫助這一點也將非常感激。 謝謝 大衛

Answer 1

我認爲你的rateit函數有一個錯誤，這就是爲什麼之前的jQuery不工作，否則你的代碼是好的。

Answer 2

確定 - 首先我改變了'rate-val'以不使用減號（無效的JavaScript變量）。我還修復了一些JavaScript錯誤。

在將項目添加到表格的部分中，實際上並沒有將rateval變量放入div中。你把它放在一個自定義的數據綁定中，但不是它實際顯示HTML的地方。

我更新如下它：

$("#add-to-remedy").click(function() { 
    var htmlToAppend = 
     '<tr><td>' + $('input[type=text].form-control').val() + '</td><td>' + 
     '<div class="rateit" data-rateit-value="' + rateval + 
     '" data-rateit-ispreset="true" data-rateit-readonly="true">' + rateval + '</div>' + '</td></tr>'; 
    $("#remedy-tbl").append(htmlToAppend); 
    newTableRow.appendTo("#remedy-tbl"); 
}); 

從我的角度未知（因爲不知道rateit框架）是什麼數據rateit價值是應該做的。如果在分配data-rateit值時應該自動填充div，那麼我不知道應該使用什麼來修復它。也就是說，我相信下面的小提琴能夠完成你想要的東西。

http://jsfiddle.net/gZ9by/13/