添加输入文本和rateit星表也jsfiddle javascript无法正常工作

时间:2014-07-02 18:20:01

标签: jquery

我正在尝试向包含2个单元格的表添加一行。 单元格1:输入字段中的文本 单元格2:评价星形鼠标 这是我的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");
            });
  });

这里是没有工作的jsFiddle http://jsfiddle.net/gZ9by/8/我明白问题是javascript无效,但我不知道为什么。对此的帮助也将非常感激。 谢谢 大卫

2 个答案:

答案 0 :(得分:0)

我认为你的rateit函数有一个错误,这就是为什么前面的jquery没有工作,否则你的代码就好了。

答案 1 :(得分:0)

好的 - 首先我更改了&#39; rate-val&#39;不使用减法符号(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");
});

从我的角度来看未知(由于不知道价格框架)是数据利率值应该做的事情。如果在分配data-rateit-value时应该自动填充div,那么我不知道应该用它修复什么。也就是说,我相信以下小提琴能够实现你想要的目标。

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