我正在使用jQuery编写一个小的UI。HTML div.html()没有获取内容和呈现
我在我的网页中有以下html。
<div id= "mystar">
<div class=" text-center">
<h4>Iron Man- Movie Rating</h4>
</div>
<div class="panel panel-default text-center">
<div class="panel-body">
<div class="row">
<div class="col-sm-3">
<h4>Rating</h4>
</div>
<div class="col-sm-3">
<input type="number" class="rating" data-size="xs" step="0.5" max="5" min="0" value="0" id="input-3">
</div>
</div>
</div>
</div>
</div>
当我看到它通过我看到,这已经扩大到
<div class="text-center "><h4>Iron Man- Movie Rating</h4></div><div class="panel panel-default text-center"><div class="panel-body "><div class="row "><div class="col-sm-3 "><h4>Average Peer Rating</h4></div><div class="col-sm-3 "><div class="star-rating rating-xs rating-active"><div class="clear-rating clear-rating-active" title="Clear"><i class="glyphicon glyphicon-minus-sign"></i></div><div data-content="" class="rating-container rating-gly-star"><div style="width: 40%;" data-content="" class="rating-stars"></div><input style="display: none;" id="input-3 " value="0 " min="0 " max="5 " step="0.5 " data-size="xs " class="rating form-control" type="number"></div><div class="caption"><span class="label label-warning">Two Stars</span></div></div></div></div></div></div>
我想这mystar当我点击按钮来获得内容的浏览器。所以我在按钮的点击功能中做了以下操作。
var starContent = "<div class= "text-center "><h4>Iron Man- Movie Rating</h4></div><div class= "panel panel-default text-center"><div class= "panel-body "><div class= "row "><div class= "col-sm-3 "><h4>Average Peer Rating</h4></div><div class= "col-sm-3 "><input id= "input-3 " value= "0 " type= "number" min= "0 " max= "5 " step= "0.5 " data-size= "xs " class= "rating "></div></div></div></div>"
,做
$('#mystar').html(starContent);
正如我在第一种方法做的内容不被扩大。我看到它与starContent一样的html,并且它不会产生所需的效果,因为它将它直接放入mystar的div中。
我该怎么做才能使它与上一个效果相同。我需要这个来点击一个按钮。
我增加了单引号。但仍然如此。问题在于,通过.html()添加的单引号内的这个html不会像直接在div下面的html那样展开。我的意思是班级必须扩大并产生效果。实际效果是,它附带了星号和附加的图片,而不是文本框。我已经展示了如何通过浏览器浏览器直接在html(没有.html())的情况下直接在html中展开div - 从firebug中拾取 – user3584218