【javascript】jQuery等で動的に追加した要素のイベントが動作しない

2018/2/21 javascript

jQueryのclickイベントを登録した場合、 clickイベントに登録前に存在した要素についてはイベントが適用されるが動的に追加した要素にはイベントが適用されない。

そういった場合は「on」を利用した記述にすると動的に追加した要素にもイベントが適用される。

<script>
$( function(){
	// clickの場合は動的に追加された要素にはイベントが適用されない
	$('.classname').click(function(){
		alert('click');
	});
	// onの場合は動的に追加された要素にもイベントが適用される
	$(document).on("click",".classname",function(){
		alert("on");
	});
});
</script>

$( function(){

// clickの場合は動的に追加された要素にはイベントが適用されない

$('.classname').click(function(){

alert('click');

});

// onの場合は動的に追加された要素にもイベントが適用される

$(document).on("click",".classname",function(){

alert("on");

});

</script>

この記事は役に立ちましたか？

役に立った (1)
もっと詳しい情報が必要 (0)
情報が古かった (0)
目的の情報では無かった (1)