首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >超文本标记语言div.html()不获取内容和呈现

超文本标记语言div.html()不获取内容和呈现
EN

Stack Overflow用户
提问于 2015-06-27 12:43:04
回答 3查看 63关注 0票数 0

我正在使用jquery编写一个小的ui。

我在我的网页上有下面的html。

代码语言:javascript
运行
复制
<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>

当我通过浏览器查看它时,我看到它已经扩展为

代码语言:javascript
运行
复制
<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在我点击按钮时获得内容。因此,我在按钮的click函数中执行了以下操作。

代码语言:javascript
运行
复制
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>"

并做到了

代码语言:javascript
运行
复制
$('#mystar').html(starContent);

内容不会像我在第一个方法中那样扩展。我看到它和starContent的html是一样的,当我把它直接放到mystar的div中时,它并没有产生想要的效果。

我应该怎么做才能让它和之前的效果一样。我需要这个出现在一个按钮的点击。

EN

回答 3

Stack Overflow用户

发布于 2015-06-27 12:48:22

这必须抛出一个语法错误,字符串包含引号,所以必须用单引号将它们括起来:

代码语言:javascript
运行
复制
    var starContent = "<div class= "text-center "><h4>..."

代码语言:javascript
运行
复制
    var starContent = '<div class= "text-center "><h4>...'
票数 1
EN

Stack Overflow用户

发布于 2015-06-27 12:48:44

你需要加单引号而不是双引号。因为,字符串中已经有双引号了。这是小提琴http://jsfiddle.net/pratbhoir/2fv0xmub/

代码语言:javascript
运行
复制
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>'
票数 0
EN

Stack Overflow用户

发布于 2015-06-27 13:14:56

使用:

代码语言:javascript
运行
复制
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>'

编辑:

请查找stat-plugin/JS的'refresh‘或'render’方法。并在html()调用之后调用这些方法。你会得到你想要的。

代码语言:javascript
运行
复制
$('#input-id').rating('refresh')

或者尝试

代码语言:javascript
运行
复制
$('#input-id').rating('reset')
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/31085223

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档