關于Js對頁面進行渲染

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,814評論 1 92
  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務發(fā)現,斷路器,智...
    卡卡羅2017閱讀 134,991評論 19 139
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,540評論 25 708
  • 01 畢業(yè)后的迷茫 12年前我經濟法專業(yè)本科畢業(yè),對未來職業(yè)沒有規(guī)劃,不知道該做什么,于是發(fā)揮“會考試”(注意不是...
    資深美麗拆書家任麗娜閱讀 1,368評論 10 11
  • 去年11月去給瑤做伴娘時,就想要寫篇作文,給我互相陪伴了十三年的兩位姑娘。時至今日,瑤的女兒小桃子已經出生21天,...
    羊它它閱讀 558評論 0 1