关于Js对页面进行渲染
2015-12-30 本文已影响900人
jnunp
先做一个测试代码
当前代码测试 页面中虽然会出现三个input标签
但是第三个无法被js进行渲染
也就是说input内所输出的内容并不是红色的而是默认的黑色
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<input type="text" class="fuck" />
<input type="text" class="fuck" />
<script>
$('fuck').css('color', 'red');
var str =$("<input class=\"fuck\">");
$('body').append(str);
</script>
</body>
</html>
而稍微切换下js的顺序
input就可以正常渲染
<script>
var str =$("<input class=\"fuck\">");
$('body').append(str);
$('fuck').css('color', 'red');
</script>
总结：
页面添加的内容要进行渲染，就一定要在渲染的js之前插入所需要进行渲染的内容
ajxa或datatable进行渲染的页面添加需要js渲染的代码时
需要通过回调函数对页面进行二次渲染
代码：
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<input type="text" class="fuck" />
<input type="text" class="fuck" />
<script>
init($('.fuck'));
function init(obj){
obj.css('color', 'red');
}//渲染页面中的boj（对象）的color
var str =$("<input class=\"fuck\">");
$('body').append(str);// 对页面进行添加一个html
init(str);//进行重新渲染
</script>
</body>
</html>
涉及理解：异域（2015.12.30）
