jQuery產生新元素並綁定click事件

 

HTML代碼如下：

<form>
<div id=”newElement“></div>
<input type=”button” value=”產生新元素” id=”createElement” />
</form>

 

Javascript代碼如下：

 

$(document).ready(function(){
$(”#createElement“).click(function(){
//統計當前頁面中使有以newButton_開頭的元素個數，產生ID
id = $(”[id^='newButton_']“).size()+1;
//產生新元素，追加到ID值為newElement的元素中
$(box.getButton(id)).appendTo($(”#newElement“));
//綁定click事件,其它change事件類別似
$(”#newButton_”+id).click(function(){
box.getClick();
});
});
});

//產生一個對象盒子,物件導向思想，封裝我們的函數，強烈推薦這種方法
var box = {};
box.getButton = function(id){
return ‘<input type=”button” value=”新按鈕” id=”newButton_’+id+‘” /><br />’;
//返回任何你需要產生的新元素
}

box.getClick = function(){
alert(’事件生效啦！你點擊了新按鈕’);
//添加任何你需要的代碼
}

 

 

 

其實過程很簡單，可分為三個步驟，總結一下：
第一步：產生新元素;
如：$(box.getButton(id)).appendTo($(”#newElement“));

第二步：對需要綁定事件的新元素進行click事件綁定，注意：新元素的ID是唯一的，這樣才能正確綁定;
如：$(”#newButton_”+id).click(function(){ box.getClick(); });

第三步：綁定什麼click事件，事件的具體代碼;
如：box.getClick = function(){ alert(’事件生效啦！你點擊了新按鈕’); }