[問題] JS物件Constructor的行為

看板Web_Design作者 (inker)時間12年前 (2013/02/27 22:31), 編輯推噓5(505)
留言10則, 4人參與, 最新討論串1/1
小弟寫的這段JS code主要想把演算法用物件封裝起來, 然後在建構物件的時候產生對應的div(在$("con")這個div容器下) 再給每一個物件assign一個唯一的id去用來控制相對應的div. var BOARD_W = 150, BOARD_H = 100, Z_idx = 1; var gid = 0; var board = function(x,y){ this.id = gid ++; $("con").innerHTML += "<div id='b" + this.id + "'position: absolute; left: " + x + "px; top: " + y + "px; z-index: " + (Z_idx++) + "; width: " + BOARD_W + "px; height: " + BOARD_H + "px;'></div>"; $("b" + this.id).onmousedown = function(event){ alert(this.id); }; }; function Test(){ var a = new board(100, 100); var b = new board(250, 250); } 想請教一下為何在產生完a,b兩個物件後我用chrome去看#b1底下有onmousedown的event, 但#b0底下沒有? 只產生a物件的話#b0又有出現onmousedown的event? -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 140.115.213.75

02/27 22:36, , 1F
innerHTML會造成html重構 之前的DOM指標會被清除
02/27 22:36, 1F

02/27 22:36, , 2F
所以必須要重新綁訂事件
02/27 22:36, 2F

02/27 22:36, , 3F
不然就是用插入node的方式可以避免HMTL重構...
02/27 22:36, 3F

02/27 22:50, , 4F

02/27 22:57, , 5F
樓上正解...try insertAdjacentHTML
02/27 22:57, 5F

02/27 23:01, , 6F
為了這個問題我還上stackoverflow問過 感覺超丟臉的...
02/27 23:01, 6F

02/27 23:07, , 7F
原來問這個問題會很丟臉XD
02/27 23:07, 7F

02/27 23:10, , 8F
感覺應該是常識 可是沒碰過還真的不知道的那種
02/27 23:10, 8F

02/28 19:54, , 9F
應該說是$("con")內容被覆寫了,原本綁定的#b0已經消失
02/28 19:54, 9F

02/28 19:55, , 10F
第二次 new board 時重新寫了個新的#b0進去
02/28 19:55, 10F
文章代碼(AID): #1HBXYfMF (Web_Design)