首先要明白瀏覽器在載入頁面的時候是按順序來載入的,這樣以來就很清楚了,js動態新增dom以後,這些dom並沒有繫結事件,這個時候最簡單的乙個辦法就是:將繫結事件的方法封裝到乙個函式a中,在動態新增完dom以後立即執行一次函式a即可。
需要注意的是,在你可能同時需要新增許多的dom,不要新增乙個就執行一次函式a,這樣會增加瀏覽器的負載,你需要在所有dom新增完以後在執行函式a,例如你用乙個for迴圈遍歷dom組合並拼接成乙個字串,然後新增到某個父級dom裡面,這個時候你需要在迴圈外新增一次就可以了。
**如下:
1doctype html
>
2<
html
lang
="en"
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>新增div並繫結點選事件
title
>
6<
style
>
7div.btn
15div.innerdiv
22style
>
23head
>
24<
body
>
25<
div
class
="aa"
>
26<
div
class
="btn"
>新增div並繫結點選事件
div>
27<
div
class
="outerdiv"
>
div>
28div
>
29<
script
>
30function
getclass(classname)
33getclass(
'btn')[
0].onclick
=function
() 36
//將點選事件封裝為函式
37function
funa() 42}
43}44//
將新增dom封裝為函式
45function
adddom()
50getclass(
'outerdiv')[
0].innerhtml
=oldhtml;
51funa();52}
53//
如果將函式a放在這裡就不會起作用的
54//
funa();
55script
>
56body
>
57html
>
個人部落格:[**午後南雜**](
原生js動態新增樣式表
原生js給html動態新增樣式表 1.建立標籤新增一張內建樣式表 var style1 document.createelement style style1.innerhtml body top hover 2.另一種是新增外部樣式表,即在文件中新增乙個link節點,然後將href屬性指向外部樣式...
原生dom如何對元素的class進行操作
今天看書時突然發現了classlist屬性,是domtokenlist的例項,以陣列的形式儲存元素的class屬性。classlist可以用來很方便的操作元素的class,對其增刪該查操作。說來慚愧,一直以來都是用jquery對元素的class進行操作,以為原生js的class操作必須要通過clas...
ANGULARJS 動態編譯新增到dom中
在使用angularjs 時,希望通過動態構建angular模版,再通過angular進行展示。使用 方法如下 通過 compile動態編譯html varhtml vartemplate angular.element html varmobiledialogelement compile tem...