innerHtml动态生成button并绑定事件

• 在我们日常开发中可能会遇到很多需要动态生成button的事件，那么，这个时候通常就不能固定的将页面写死了，这时我们需要使用innerHTML来动态生成这些按钮，并给每一个按钮都绑定事件。以下是具体的实现：

• 首先通过ajax获得需要生成button的具体参数，根据需求不同，自行获得详细数据。

$.ajax({type: 'post',url : DOMAIN_URL "/residence/queryBuildByCondition.do",data : {son_type:son_type,//具体传的参数值parent_code : parent_code,},
success : function(result){var rsObj = typeof result === "object" ? result : $.parseJSON(result);//将对象转化为json对象var d=document.getElementById("buildHY");//此处是你需要生成button的标签；var str = "";//当button数量达到4个的时候换行；for ( var i = 0; i < rsObj.length; i++) {var son_name = rsObj[i].son_name; var roomCode = rsObj[i].son_code;if(i !==0 && i % 4 ==0){str += '<br>';}
//此处为innerHTML生成button样式以及给button命名，加上id号；str +='<input type = "button" style="width:21%;border-radius:5px"  class="easyui-linkbutton easyui- tooltip" name="'+"houseContract"+'" id="'+i+'"  value="'+son_name+'"/>' + '&emsp;';}
//这句话是关键，将以上样式生成button                        document.getElementById("buildHY").innerHTML=str;
//此处将个生成button每一个放置一个参数，方便做点击事件获取参数，根据给人需求绑定数据；
for(var j=0; j<rsObj.length; j++){var son_code = rsObj[j].son_code;$('#'+j).attr('son_code',son_code);                               }//这里是点击事件的调用；btnClickHY();},
});

• button点击事件：

var btnClickHY = function(){    //通过上面的button名字绑定点击事件；$("input[name='houseContract']").unbind('click').bind('click',function(){//获得每个button的id值并给其赋值；var indexId =  indexId = $(this).attr("id");var son_code = $('#'+indexId).attr('son_code');$("#roomCodeHY").combobox('setValue',son_code);//这里是easyui datagrid的load方法；$('#houseGrid').datagrid('load', {residenceCode :son_code,});})                      
}

• 以上就是用innerHTML动态生成button并绑定事件的全部内容，希望能够对大家有所帮助。