先做一個測試代碼
當前代碼測試 頁面中雖然會出現三個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)