本文共 1023 字，大约阅读时间需要 3 分钟。

事件代理（event delegation）：又称事件委托，是利用事件冒泡,把原本需要绑定的一个或多个事件委托给父元素。

需求： 项目中从新闻的列表页，添加点击列表进入新闻详情页的功能，一般都是委托给列表的父元素，因为新闻列表为动态添加的，所以click无法给动态添加的元素添加事件，需要借助事件委托来给列表添加事件；
原因：因为新闻列表为动态添加的，在document.ready时不存在，所以无法绑定元素事件，无法对事件进行响应，因此需要把事件委托给已有的父级元素。
html

<ul class="father">	<!--li是后期动态渲染的 -->	<li class="son" data-id="000">详情1</li>	<li class="son" data-id="401">详情2</li>	<li class="son" data-id="203">详情n</li></ul>

//delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。$(".father").delegate("li.son","click",function(){   	var links = $(this).attr("data-id");//路径参数	window.location =  ...;	//...}

//在原生js里面是通过event对象的taget属性实现$("ul").click(function(event){   // 兼容性处理var event = event || window.event;var target = event.target || event.srcElement;if(target.nodeName  == "LI"){   var links = $(this).attr("data-id");//路径参数window.location =  ...;//...}

这两个方法都是用过且可以实现的方法，也搜到过其他方法，但是说有兼容性，没有试，这两种方法足以解决问题了。

贴上代码，感兴趣的可以试试。

$(document).on('click','li.son',function(){   //$(this)指的就是被点击的元素})//据说不兼容苹果手机的。需要在元素css中添加cursor: pointer;