WEB程序開發(fā)中，對(duì)于使用jQuery生成的新元素或新添加的元素，經(jīng)常需要用jQuery對(duì)新建的元素綁定click事件。由于默認(rèn)的 click事件是不起作用的，必須給新生成的元素進(jìn)行click事件綁定。這幾天由于項(xiàng)目需要，通過使用jQuery生成新元素，同時(shí)給新元素綁定 click事件和change事件，經(jīng)過項(xiàng)目實(shí)踐，我總結(jié)一下相關(guān)知識(shí)，通過使用最簡單的方法，實(shí)現(xiàn)jQuery綁定click事件，供參考。

HTML代碼如下：

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

Javascript代碼如下：

$(document).ready(function(){
$(”# createElement “).click(function(){
//統(tǒng)計(jì)當(dāng)前頁面中使有以newButton_開頭的元素個(gè)數(shù)，生成ID
id = $(”[id^=' newButton_ ']“).size()+1;
//生成新元素，追加到ID值為newElement的元素中
$ (box.getButton(id) ).appendTo($(” #newElement “));
//綁定click事件,其它c(diǎn)hange事件類似
$(” #newButton_”+id ).click(function(){
box.getClick();
});
});
});

//生成一個(gè)對(duì)象盒子,面向?qū)ο笏枷耄庋b我們的函數(shù)，強(qiáng)烈推薦這種方法
var box = {};
box.getButton = function(id){
return ‘<input type=”button” value=”新按鈕” id=” newButton_’+id+ ‘” /><br />’;
//返回任何你需要生成的新元素
}

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

效果圖如下：

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

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

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

使用jQuery給javascript生成的新元素綁定click事件方法還很多，這里只是介紹其中一種，個(gè)人覺得這種jQuery綁定click事件方法是最有效的而且代碼精簡，感覺也很舒服，推薦！

jQuery生成新元素綁定click事件