innerHtml动态生成button并绑定事件

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并绑定事件的全部内容，希望能够对大家有所帮助。