JQuery Mobile 開發學習手記（二）：JS綁定的按鈕動作不正確的問題

二、bind和unbind。

在項目過程中，需要一組圖片設置長按監聽（原諒我在這用了“設置監聽”一詞），長按彈出一個對話框，點擊確認刪掉當前圖片，然後刷新頁面。

在最開始的時候，我是這樣寫的：

for(i = 0; i < bookNum; i++){
	(function(){
		var index = i;
		var bookHref = $('a#book_'+index);
		bookHref.bind("taphold", {index: index}, tapholdHandler);
	})();
}
function tapholdHandler(event) {
	$("#dialogDelete").popup("open");
	var dialogCommit = $('#dialogCommit');
	dialogCommit.click(function(){
		//刪除書，然後刷新頁面。
	});
	$('#dialogCancel').click(function(){
		$("#dialogDelete").popup("close");
	});
}

然後發現，第一次長按刪除的時候是正常的，第二次開始就亂七八糟的，多刪了很多東西。

通過各種輸出log調試，發現刪除第一張圖片的時候正常，刪除第二張圖片的時候會連續刪兩張，刪除第三張圖片的時候會連續刪三張……

這就讓我有點懷疑，是不是每次刷新頁面的時候註冊監聽的問題？

百度了一下，果然如此，跟Java不同，JavaScript給界面元素綁定事件並不會替換原來綁定過的事件，而是會重複綁定。

還是上一節說的問題，Java的機制是“設置監聽”，JavaScript的機制是“綁定事件”。

明白這一點後就好解決了。因爲我刪掉一張圖片以後會刷新一下頁面，即會重複綁定一次。

解決辦法就是在每次綁定之前，先用unbind解綁一次。

for(i = 0; i < bookNum; i++){
	(function(){
		var index = i;
		var bookHref = $('a#book_'+index);
		bookHref.unbind("taphold",tapholdHandler);
		bookHref.bind("taphold", {nid: json_books[index].nid},tapholdHandler);
	})();
}
function tapholdHandler(event) {
	$("#dialogDelete").popup("open");
	var dialogCommit = $('#dialogCommit');
	dialogCommit.unbind("click");
	dialogCommit.click(function(){
		//刪除書，然後刷新頁面
	});
	$('#dialogCancel').click(function(){
		$("#dialogDelete").popup("close");
	});
}

這樣，問題基本上得到了解決。