给动态加载的标签绑定事件

$("#main").on('click',"li",function(){
	var count=$(this).index();
	var id=$(this).attr("id");
})

$(选择器).on('click',function(){})

on方法包含很多事件，点击，双击等等事件。和$().click()的用法一样，最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数。

动态加载的标签无法使用js直接进行操作

 

使用普通的方式绑定事件

$(选择器).click(fn)当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器。

 

head.js

function logout(){
	$.ajax({
		"url":"/user/logout",
		"type":"POST",
		"async":false,
		success:function(data){
			window.location.href = "/login.html";
		}
	})
}

$(function () {
	var id = GetQueryString("id");
	$("#0").addClass("active");
	if(id!=0 && id!=null){
		$("#0").removeClass("active");
	}
	initnavmenu();
	$("#main").on('click',"li",function(){
		var count=$(this).index();
		var id=$(this).attr("id");
	})
})

//初始化加载菜单栏
function initnavmenu(){
	var id = GetQueryString("id");
	$.ajax({
		"url":"/index/columns",
		"type":"POST",
		"async":false,
		success:function(data){
			console.log(data);
			var _data = data.data; //由于后台传过来的json有个data，在此重命名
			var html = "";
			for (var e in _data) {
				if(_data[e].id==id){
					html += '<li id="'+_data[e].id+'" class="mianIndex active"><a href="'+_data[e].href+'?id='+_data[e].id+'">'+_data[e].name+'</a></li>'
				}
				else{
					html += '<li id="'+_data[e].id+'" class="mianIndex"><a href="'+_data[e].href+'?id='+_data[e].id+'">'+_data[e].name+'</a></li>'
				}
			}
			$("#main").append(html); //渲染
		},
		error:function(){
			alert("初始化失败");
		}
	})
}

function GetQueryString(name){
	var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
	var r = window.location.search.substr(1).match(reg);
	if(r!=null)return  unescape(r[2]); return null;
}