解决ajax异步更新后控件的click事件失效的方法（jekyll迁移）

layout: post
title: 解决ajax异步更新后控件的click事件失效的方法
date: 2019-11-14
author: xiepl1997
tags: 随笔

昨天做了一个在线投票网站，是为研究生院“良师益友”活动准备的。

在其中遇到一个问题，用 ajax 异步更新了导师列表，列表中有“投票”按钮，在异步更新完成之后，再次点击“投票”按钮则一点动静没有。调试之后发现连按钮的 jQuery 的 click 事件都不能触发了。造成了很大的困扰。按照自己的理解代码没有问题，可是效果就是不对，那就是理解有问题了。

查阅资料后果然是自己对机制的不了解导致的这个问题。

原来的代码写的是：

$(".vote_bt").click( function () {
	……(此处代码省略)……
	……
	……
	$.ajax({
		……
		(异步更新)
	})
})

上述代码中的异步更新操作，是将触发 click 事件的 vote_bt 也更新了的。也就是说通过 ajax 动态加载出了新的 vote_bt，那么开始使用的click事件就是无法起作用的，因为事件绑定的时候这个 DOM 并不存在。

这个时候就要使用on()方法，on()方法在被选元素及子元素上添加一个或多个事件处理程序，将原来程序改为如下代码：

$(document).on("click", ".vote_bt", function(){
	……(此处代码省略)……
	……
	……
	$.ajax({
		……
		(异步更新)
	})
})

使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素），将子元素的事件绑定到父元素上，子元素被点击后，事件会冒泡到父元素，由父元素负责捕捉然后触发事件。