为什么innerhtml输出文本的JS和CSS都无效

One_bin 2015-04-26 04:00:54
为什么innerhtml输出文本的JS和CSS都无效
未经过innerHTML输出的样式是这样的

由innerHTML输出后得到的是无样式和js处理的为



处理函数为
function getData(){
var con2 = "";
var one=15;
var two="test";
for (var i = 1; i <= 2; i++) {
con2 += "<div class=\"item\" id=\""
+ one
+ "\"><label title=\""
+ two
+"\" class=\"titem\"><input type=\"checkbox\" value=\""
+one
+" \"title=\""
+two
+"\" class=\"b\" />"
+two
+"</label><div class=\"sitem\"></div></div>";
}
con2+="<div class=\"clear\"></div>";
$("#uniTbl").html(con2);
}


原始页面为
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery制作地区多选特效，点击select选项弹出地区选择框-psd素材网</title>



<link href="css/style.css" rel="stylesheet" type="text/css" />

<script type='text/javascript' src="js/jquery.min.js"></script>
<script type='text/javascript' src="js/jquery.selectlayer.js"></script>
<script type='text/javascript' src="js/getdata.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var QS_city=new Array()
OpenCategoryLayer(
"#district_cn",
"#sel_district",
"#district_cn",
"#citycategory",
QS_city,
14);
});
</script>

</head>
<body>

<div style="width:260px;margin:20px auto;">

<input name="district_cn" id="district_cn" type="text" value="请选择所在地区" readonly="true" class="sltinput" />
<input name="citycategory" id="citycategory" type="hidden" value="" />

<div style="display:none" id="sel_district">
<div class="OpenFloatBoxBg"></div>
<div class="OpenFloatBox">
<div class="title1">
<h4>请选择工作地区
<input type="button" value="加载" onclick="getData()"/>
</h4>
<div class="DialogClose" title="关闭"></div>
</div>
<div class="tip">可多选，最多选择8项</div>
<div class="content">
<div class="txt" id="uniTbl">
<div class="item" id="593">
<label title="新塘" class="titem"><input type="checkbox" value="593" title="新塘" class="b" />新塘</label>
<div class="sitem"></div>
</div>
<div class="item" id="598">
<label title="增城" class="titem"><input type="checkbox" value="598" title="增城" class="b" />增城</label>
<div class="sitem"></div>
</div>
<div class="item" id="564">
<label title="番禺" class="titem"><input type="checkbox" value="564" title="番禺" class="b" />番禺</label>
<div class="sitem"></div>
</div>
<div class="item" id="589">
<label title="南沙" class="titem"><input type="checkbox" value="589" title="南沙" class="b" />南沙</label>
<div class="sitem"></div>
</div>
<div class="item" id="617">
<label title="萝岗" class="titem"><input type="checkbox" value="617" title="萝岗" class="b" />萝岗</label>
<div class="sitem"></div>
</div>
<div class="item" id="618">
<label title="黄埔" class="titem"><input type="checkbox" value="618" title="黄埔" class="b" />黄埔</label>
<div class="sitem"></div>
</div>
<div class="item" id="599">
<label title="花都" class="titem"><input type="checkbox" value="599" title="花都" class="b" />花都</label>
<div class="sitem"></div>
</div>
<div class="item" id="590">
<label title="从化" class="titem"><input type="checkbox" value="590" title="从化" class="b" />从化</label>
<div class="sitem"></div>
</div>
<div class="item" id="572">
<label title="白云" class="titem"><input type="checkbox" value="572" title="白云" class="b" />白云</label>
<div class="sitem"></div>
</div>
<div class="item" id="575">
<label title="广州市区" class="titem"><input type="checkbox" value="575" title="广州市区" class="b" />广州市区</label>
<div class="sitem"></div>
</div>
<div class="item" id="588">
<label title="佛山" class="titem"><input type="checkbox" value="588" title="佛山" class="b" />佛山</label>
<div class="sitem"></div>
</div>
<div class="item" id="587">
<label title="东莞" class="titem"><input type="checkbox" value="587" title="东莞" class="b" />东莞</label>
<div class="sitem"></div>
</div>
<div class="clear" id="last"></div>
</div>
<div class="txt" >
<div class="selecteditem"></div>
</div>
<div class="txt">
<div align="center"><input type="button" class="but80 Set" value="确定" /></div>
</div>
</div>
</div>
</div>

</div>

</div>
</body>
</html>
请问大神们 这该如何解决？
...全文
1085 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
014379200 2017-01-02
  • 打赏
  • 举报
 回复
为什么你们样式文件也要动态加载啊？这样有什么好处吗
qq_36627549 2017-01-02
  • 打赏
  • 举报
 回复
同求，在编写innerhtml输出html时，属性（包括style，class）设置全部没有应用上，完全是无效果的标签
天际的海浪 2015-04-26
  • 打赏
  • 举报
 回复
innerHTML是无法正常解析<script>,<link>标签的 要动态加载这些标签只有用document.createElement("script")动态创建,再appendChild()到页面中. 也可以用jquery的html()方法.html()方法会自动处理这些标签
用innerHTML修改input标签的文本信息无效
Input标签是单标签，没有结束符，它所显示的文本信息放在value里面，如果我们直接改input标签的innerHTML/innerText就没有效果。 所以我们通过修改value值来修改显示的文本信息
js和css实现点击显示下拉框
js和css实现点击显示下拉框 附加效果，鼠标悬浮高度增加，实现上下增长。 先看效果： 1，用定位实现高度增长时向上下延伸： 鼠标移动上去或被点击时，设置增加高度，正常情况下盒子的高度会向下增加，这时候加上定位，向上移动一定的距离，补消向下扩展高度的距离，视觉上实现上下延伸。 <div class="box1"> <div class="bb"></div> </div> .box1 { position: relative
关于使用innerHTML属性插入大量代码(有换行)
问题环境: 由于想创建一个能够自适应窗口的网站,所以想着html结构能够动态改变,因为需要大刀阔斧的改动,所以选择了innerHTml,然而在使用过程中却出现了问题 代码: html源代码: <div id="plat_container_1"> </div> 预想插入后的代码: <div id="plat_container_1"> <div cla...
javascript 改变 HTML 元素 element.innerHTML、.attribute、.setAttribute(attribute, value)、.style.property
改变元素的 inner HTML element.innerHTML = new html content 改变元素的 inner HTML eg: div.innerHTML = '这是一条测试文本' 可以将<div></div>修改为<div>这是一条测试文本</div> 还可以通过这种方法将标签放入div标签之中 div.innerHTML = '<a>这是一个测试文本</a>' <!DOCTYPE html> &l.
01-HTML+CSS+JS【常用总结+案例练习】
文章目录HTML第一部分第二部分第三部分总结CSS选择器常用样式总结JavaScriptECMA Script基本语法JS对象BOM浏览器对象模型DOM文档对象模型事件案例：案例1-注册表单校验案例2-5秒后跳转到百度官网案例3-全选和全不选和反选案例4-省市二级联动案例5-表格隔行换色案例6-轮播图案例7-定时弹广告案例8-会跳动的时钟 不要死记硬背，要学会运用，案例驱动，通过案例学习 不要死记硬背，要学会运用，案例驱动，通过案例学习 不要死记硬背，要学会运用，案例驱动，通过案例学习 前端知识点 细，碎，
CSS

61,115

社区成员

60,728

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章