Adobestock 417823664

随分と久しぶりに投稿します。
最近、ExtJSから若干離れたことをしております。(汗;
ひょんな事から、jQueryによるイベントハンドルを行いたい状況で、下記をメモ程度に記載しておきます。

要点は

  • 独自のイベントを定義して
  • そのイベントをハンドルする

ということです。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>jQueryで独自イベントのハンドル</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    	
    	$.each(["addClass", "removeClass"], function(i, methodname) {
    		var oldmethod = $.fn[methodname];
	        $.fn[methodname] = function() {
	        	oldmethod.apply(this, arguments);
	            this.trigger(methodname + "Change");
	            return this; 
	        } 
	    });

    	$('h1').on('addClassChange', function() { console.log('addClass!!') });
    	$('h1').on('removeClassChange', function() { console.log('removeClass!!') }); 
	});
    </script>
</head>

<body>
    <h1 id="h1">独自イベントのハンドル</h1>
</body>

</html>

addClass された際に、イベントのハンドルがしたかったのです。
これで、addClassChange、removeClassChange というイベント名で addClass、removeClass のハンドルが出来るようになります。

参考にしたところ
https://forum.jquery.com/topic/firing-an-event-on-addclass

記事の内容が古くなっているものもあり、適宜アップデートされる場合がございます。

コメントは受け付けていません