【前端】Ajax动态加载的Dom元素，无法使用click点击事件

现象

前端
通过Ajax将后端返回的数据获取后，进行动态显示数据。

 $("#page").XXX({
	ajax: {
              callback: "callBackData",
              on: true,
              dataType: 'json',
              url: contextPath + '/xxx.do',
              param: param
          }
});

function callBackData(ret) {
	var $tr = ...
	$("#id_table").append($tr);
	if (ret.code > 0) {
		var html = "";
                    var datas= ret.datas;
                    for (var i = 0; i < datas.length; i++) {
                    var trobj = records[i];
                        html += '<tr>' +
                            '    <td >' + trobj .aa+ '</td>' +
                            '    <td >' + trobj .bb+ '</td>' +
                            '    <td><a href="javascript:void(0)" class="aBtn" >点击</a></td>' +

                            '  </tr>'
                    }
                     $("#id_table").append(html);
	}
}
//失效
$(".aBtn").click(function(){
             console.log('OK')
});

此时.aBtn 按钮失效，是因为加载页面时，Dom元素还未生成。

处理方法

其中一种方法
使用on：
可以通过on方法绑定事件，可以绑定到它的父级或者body中，实现如下：

$("#id_table").on('click','.aBtn',function(){
 alert('OK')
});