jQueryの覚書 | ワクガンス

クリックイベントの除去

	let btn = jQuery('...略');
	btn.off('click'); // クリックイベントの除去
	

2019-8-8

jQuery要素とイベント削除、ならびにjQuery要素の再生成と再イベント登録を検証

Demo

HTML

<button type="button" onclick="regenerate()" class="btn btn-success">要素生成</button>
<button type="button" onclick="deleteElm()" class="btn btn-danger">要素削除</button>
<div id="example"></div>
	

JavaScript

var jq_test1;

function regenerate(){
	
	console.log('要素の生成');
	
	let html = `<div id="test1" style="padding:20px;background-color:#d7eaf3">クリック</div>`;
	$('#example').html(html);
	
	jq_test1 = $('#test1');
	
	// 一つ目のイベントを追加
	jq_test1.click((evt)=>{
			var elm = $(evt.currentTarget);
			console.log('猫のエサ');
			alert('猫のエサを犬にあげてはいけないわけではない。');
		});
	
	// 二つ目のイベントを追加
	jq_test1.click((evt)=>{
			var elm = $(evt.currentTarget);
			console.log('ワンワン');
			alert('ワンワン');
		});
	
	
	
}


function deleteElm(){
	console.log('要素削除');
	if(jq_test1){
		jq_test1.remove();
	}
}
	

結論

removeメソッドで要素を削除するとイベントも消えていると思われる。
またhtml()メソッドで要素を再生成したときも、以前の要素はイベントごと消えているようだ。


2022-2-8

xxx

2019-8-8