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() 方法新增的事件處理程式適用於當前及未來的元素（比如由指令碼建立的新元素），將子元素的事件繫結到父元素上，子元素被點選後，事件會冒泡到父元素，由父元素負責捕捉然後觸發事件。