jQueryのonメソッドでマウスホバーをし、動的に生成されたものにも適用する

開発環境は、jquery-3.2.1.min.js。

マウスカーソルを合わせた*部分を、太字にして、話したら、元に戻す。
『liが先頭に追加』ボタンをクリックすると、先頭に、青い*が追加され、『liが末尾に追加』ボタンをクリックすると、末尾に、赤い*が追加される。
かつ、動的に生成されたものにもマウスホバーのイベントが適用される。

jQueryのonメソッドでマウスホバーのイベントを設定するには、マウスカーソルが触れた時は、mouseenterに、離れたときは、mouseleaveに、コールバック関数を定義します。

HTML部分

<button id="btns">liが先頭に追加</button>
<button id="btns2">liが末尾に追加</button>
<ul class="point">
	<li>*</li>
	<li>*</li>
	<li>*</li>
	<li>*</li>
	<li>*</li>
	<li>*</li>
	<li>*</li>
</ul>

jQuery部分

$(function(){

	$('#btns').on('click',function(){
		$('ul.point').prepend("<li><span style='color:blue;'>*</span></li>");
	});

	$('#btns2').on('click',function(){
		$('ul.point').append("<li><span style='color:red;'>*</span></li>");
	});

	$('ul.point').on({
		'mouseenter' : function(){
			$(this).css('font-weight','bold');
		},
		'mouseleave' : function(){
			$(this).css('font-weight','normal');
		}
	}, 'li');
});

Twitterのデザインは結局、動的に、上に下にliを増やしているだけか。

参考リンク
hover() が動的に後から生成された要素にきかないから - Qiita