jＱuery の scroll イベントは .on が効かない！？

Question

スクロールイベントに .on が効かないことを発見してしまったのですが、どなたか分かりますか？

動くサンプル：https://jsfiddle.net/jkesLu5m/

###該当のコード
こちらです。クリック（button）で要素（main）を追加し、その後要素にスクロールイベント（alert） が効かないんです。

<button type="button">追加</button>

<style>
main {
    height: 300px;
    background: pink;
    overflow-y: scroll;
}
div {
    height: 3000px;
}
</style>

<script>
// スクロール要素の追加
$(document).on("click","button", function(){
	$(this).after('<main><div><p>Hello</p></div></main>')
});	

// スクロールイベント
$(document).on("load scroll","main", function(){
	alert('表示されない');	
});	
</script>

###ためしたこと
囲んでみたけどダメでした。

$(document).ready(function() { 
  $('main').scroll(function() {
   alert('表示されない');
  });
});

Answer 1

scrollやresizeなど一部のイベントはバブリングしないので、$(document).on(イベント、セレクタ、function(){})ではスクロールイベントを拾えません。直接イベントをキャプチャする必要があります。

追記します。

直接イベントをキャプチャする

とは、動的に追加する要素に直接イベントリスナーを仕込むという意味です。

作例１

	$(document).on("click","button", function()
	{
		/** 追加するスクロール要素にscrollのイベントリスナーを仕込んだ、jQueryオブジェクトを用意 */
		var $main = $('<main><div><p>Hello</p></div></main>').on("scroll", function(evt){
			console.log(evt);	
		});
		/** 用意したjQueryオブジェクトをDOMに追加する */
		$(this).after($main);
	});	

作例２

	$(document).on("click","button", function()
	{
		/** DOMに追加する */
		$(this).after('<main><div><p>Hello</p></div></main>');

		/** 追加してからセレクタで追加した要素を探し出し、scrollのイベントリスナーを仕込む */
		$('main').on("scroll", function(evt){
			console.log(evt);	
		});
	});	

maimaimeさんのコードに近い記述は作例２ですが、
作例１のほうがコードにつながりが出て、意図が伝わりやすいかなと思います。
イベントリスナーを仕込むタイミングはDOMへの追加前でも後でも問題ありません。
ポイントはイベントバブリングされないので、どの要素に対してなのか明確にすることです。

Comments

[maimaime]

直接イベントをキャプチャする？とは？具体的なコードをご存知であれば教えて頂ければ幸いです。

[so87]

作例１と作例２を追記しました。ご参考になれば幸いです。

[maimaime]

どうもありがとうございます。２パターンのご提示のおかげでより理解が深まりました。

Answer 2

ボタンがクリックされたタイミングで追加すればいいと思います。

// スクロール要素の追加
$(document).on("click","button", function(){
    $(this).after('<main><div><p>Hello</p></div></main>');
    $('main').on("scroll", function(){
        alert('表示されない');    
    });
});    

Comments

[maimaime]

$('main').on('scroll', function(){
alert('表示されない');
});

ですか？できないみたいですね。

[cerfweb]

main部分のhtmlの記載がないのでどのような構造でどこをどうしたいのか見当がつきませんが、scrollイベントは基本$(window)を使うので。

[maimaime]

いえ、スクロールさせたい要素（main）がwidowの中にあるという設定なので、windowについてのイベントじゃないです。

あとmainはJSでappendしてますけど、これじゃなくてですか？

[cerfweb]

あ、mainは後から追加するんでしたね。

[maimaime]

ですね。むりっぽくないですかこれ？

[cerfweb]

回答を修正しましたのでお試しを。

[maimaime]

すみません今気づきました。ご修正誠にありがとうございます。

Answer 3

htmlに肝心のmain要素が抜けていますね。

＜追記＞
すいません、よく質問文読んでいませんでした・・
main要素は動的に追加されてるんですね、
ちょっとしらべてみます。

Comments

[maimaime]

あると思いますよ。

[yu-smc]

ご指摘ありがとうございます、早とちりしてました！

[maimaime]

だいじょぶですよー。いい情報があればぜひ！