ajaxで埋め込んだ要素へのイベントが働かない

ajaxで画像のURLを拾ってくる処理で、その画像が読めこめない画像だった時のエラーイベントが動いてくれません。

HTML
1<div class="ajaxImage"></div>
2
3<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
4<script type="text/javascript">
5$(function(){
6
7	$.ajax({
8		url: 'example.php',
9		type: 'POST',
10		dataType: 'text',
11		success: function(image_src){
12			$('.ajaxImage').html(image_src);
13			//<img src="https://example.com/001.png" class="image01"> のような画像のURLを返すajaxです
14		}
15	});
16
17	$('.image01').on('error', function(){
18		alert('error');
19		//これが発火しない
20		//$(document).on('error', '.image01', function(){～　も無理でした
21	});
22});
23</script>

おそらく読み込み時点で.image01という要素がないから動いていないのだと思うのです。
それを回避するための$(document).onや$(body).onなどの親に必ず存在する要素を指定することが対策方法として多くの記事で挙げられていたのですが、イベントが発火しませんでした。

ajaxではなく<img src="https://example.com/001.png" class="image01">を直接書けばエラーイベントは動くのですが…。

動的に追加された要素について、何か自分の中で誤解があるのかもしれません…。

どなたかご教示お願いいたします。

【追記】ajaxComplete()でエラーイベントを囲うことで、ajax呼出し直後の画像についてはエラーイベントを実行してくれました。
しかしその後ajaxを介さない動的な画像変更でエラーが起きた場合はイベントが発火されませんでした。
ajaxかどうかは関係なく、動的に追加されたImage要素のエラーに対するイベントの問いと思っていただければ助かります。

行動規範の内容に同意します

回答2件

ベストアンサー

$('.ajaxImage').htmlで直接書き込むのをやめてimgタグをjqueryオブジェクトとして作成してappendする方式にし、ここでerrorトリガーを設定すると良いと思います。

javascript
1<div class="ajaxImage"></div>
2
3<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
4<script type="text/javascript">
5$(function(){
6
7    $.ajax({
8        url: 'example.php',
9        type: 'POST',
10        dataType: 'text',
11        success: function(image_src){
12            var img = $(image_src);
13            img.on('error', function(){
14                alert('error');
15            });
16            $('.ajaxImage').append(img);
17            //<img src="https://example.com/001.png" class="image01"> のような画像のURLを返すajaxです
18        }
19    });
20});
21</script>