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(’事件生效啦！你点击了新按钮’); }

 

转载于:https://www.cnblogs.com/mslove/archive/2009/10/22/1587897.html