給動態加載的標籤綁定事件

$("#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;
}