Jqueryで新しく追加した要素にイベントを設定できない

Question

<span class="follow-cancel" value="32">フォロー中</span>
<!-- いずれかがデフォルトで表示 -->
<span class="follow" value="32">フォロー</span>

このようなHTMLに対して

//フォロー登録
$('.follow').on('click', function() {
		var params = {
				param1	: $(this).attr('value'),
		};
		$.ajax({
			type	: 'POST',
			url		: 'Follow',
			data	: params,
			datatype : 'json',
		}).done(function (result) {
			if(result.result == '登録成功'){
				$('.follow').each(function(i, elem) {
					if(parseInt(result.follow_id) == $(elem).attr('value')){
						$(elem).text('フォロー中');
						$(elem).attr('class', 'follow-cancel');
					}
				});
			}
		}).fail(function (jqHR, textStatus, errorThrown) {
			console.log(XMLHttpRequest.status);
			console.log(textStatus);
			console.log(errorThrown);
		});
	});

//フォロー解除
	$('.follow-cancel').on('click', function() {
		var params = {
				param1	: $(this).attr('value'),
		};
		$.ajax({
			type	: 'POST',
			url		: 'FollowCancel',
			data	: params,
			datatype : 'json',
		}).done(function (result) {
			if(result.result == '解除成功') {
				$('.follow-cancel').each(function(i, elem) {
					if(parseInt(result.follow_id) == $(elem).attr('value')){
						$(elem).text('フォロー');
						$(elem).attr('class', 'follow');
					}
				});
			}
		}).fail(function (jqHR, textStatus, errorThrown) {
			console.log(XMLHttpRequest.status);
			console.log(textStatus);
			console.log(errorThrown);
		});
	});

というJSでクリックする度にテキストとクラスを切り替えたいのですが上手くいきません
理由として新しく追加した要素はイベントハンドラに設定しなければならないというのは分かるのですが
下記のようにするとそもそも発火しません
正しい方法をご存じであれば教えてください

//フォロー登録
	$('.follow').on('click', '.follow-cancel', function() {
		var params = {
				param1	: $(this).attr('value'),
		};
		$.ajax({
			type	: 'POST',
			url		: 'Follow',
			data	: params,
			datatype : 'json',
		}).done(function (result) {
			if(result.result == '登録成功'){
				$('.follow').each(function(i, elem) {
					if(parseInt(result.follow_id) == $(elem).attr('value')){
						$(elem).text('フォロー中');
						$(elem).attr('class', 'follow-cancel');
					}
				});
			}
		}).fail(function (jqHR, textStatus, errorThrown) {
			console.log(XMLHttpRequest.status);
			console.log(textStatus);
			console.log(errorThrown);
		});
	});

	//フォロー解除
	$('.follow-cancel').on('click', '.follow', function() {
		var params = {
				param1	: $(this).attr('value'),
		};
		$.ajax({
			type	: 'POST',
			url		: 'FollowCancel',
			data	: params,
			datatype : 'json',
		}).done(function (result) {
			if(result.result == '解除成功') {
				$('.follow-cancel').each(function(i, elem) {
					if(parseInt(result.follow_id) == $(elem).attr('value')){
						$(elem).text('フォロー');
						$(elem).attr('class', 'follow');
					}
				});
			}
		}).fail(function (jqHR, textStatus, errorThrown) {
			console.log(XMLHttpRequest.status);
			console.log(textStatus);
			console.log(errorThrown);
		});
	});

Answer 1

参考: 公式リファレンス

$('.follow').on('click', function() {
  // .follow に click のイベントハンドラを設定しているので、そのときに存在している .follow にしかイベントがつかない
  // 処理
});

ではなく

$(document).on('click', '.follow', function() {
  // documentに click のイベントハンドラを設定、 click された要素が .follow だったときに実行相当の処理
  // document要素は動的に動かないので、 .follow が動的に追加されても問題ない
  // 処理
})

とするとよいかと思います。

Comments

[jiro-sima]

回答ありがとうございます
提示頂いた方法で解決しましたので以下に記述します
なお始めの$(document)部は検索範囲が狭い方が高速であるようなので
HTML部と共に少し弄っています

<div class="change-follow">
<div role="button"><span class="follow-cancel" value=32>フォロー中</span></div>
<div role="button"><span class="follow" value=32>フォロー</span></div>
</div>

//フォロー送信
$('.change-follow').on('click', '.follow', function() {
console.log('フォロー');
console.log($(this).attr('value'));
var params = {
param1 : $(this).attr('value'),
};
$.ajax({
type : 'POST',
url : 'Follow',
data : params,
datatype : 'json',
}).done(function (result) {
if(result.result == 'complete'){
$('.follow').each(function(i, elem) {
if(parseInt(result.follow_id) == $(elem).attr('value')){
$(elem).text('フォロー中');
$(elem).attr('class', 'follow-cancel');
}
});
}
}).fail(function (jqHR, textStatus, errorThrown) {
console.log(XMLHttpRequest.status);
console.log(textStatus);
console.log(errorThrown);
});
});

//フォロー解除
$('.change-follow').on('click', '.follow-cancel', function() {
console.log('フォロー解除');
var params = {
param1 : $(this).attr('value'),
};
$.ajax({
type : 'POST',
url : 'FollowCancel',
data : params,
datatype : 'json',
}).done(function (result) {
if(result.result == 'complete') {
$('.follow-cancel').each(function(i, elem) {
console.log('成功');
if(parseInt(result.follow_id) == $(elem).attr('value')){
$(elem).text('フォロー');
$(elem).attr('class', 'follow');
}
});
}
}).fail(function (jqHR, textStatus, errorThrown) {
console.log(XMLHttpRequest.status);
console.log(textStatus);
console.log(errorThrown);
});
});

Answer 2

unhappychoiceさんのご回答が手っ取り早いのですが、
もう一つ、違うアプローチから。
ボタン発火の共通クラスにクリックイベントを付与し、
クラスが付いているか付いていないかで、フォローの付け替えを実行し、
コールバッックにて、自身のクラスを付け替えるというのはいかがでしょうか？

<span class="follow-cancel follow-change-btn" value="32">フォロー中</span>
<!-- いずれかがデフォルトで表示 -->
<span class="follow follow-change-btn" value="32">フォロー</span>

$('.follow-change-btn').on('click', function() {
  var params = {
    param1: $(this).attr('value'),
  };
  // followクラスを持っているかで、フォローをするかどうか判別
  const onFollowFlg = $(this).hasClass('follow');

  // ボタン自身のコントロールをAjaxコールバック内でもできるよう、変数にthisを逃す
  const clickBtn = $(this);

  $.ajax({
    type: 'POST',
    // フォローされている（場合はキャンセルをさせる）
    url: 'Follow' + (onFollowFlg ? '' : 'Cancel'),
    data    : params,
    datatype : 'json',
  }).done(function (result) {
    if(result.result == ( onFollowFlg ? '登録成功' : '解除成功')){
      // フォローをさせたかどうかで、付け替えるクラス、中のテキストを変える
      clickBtn.addClass( onFollowFlg ? 'follow-cancel' : 'follow' ).removeClass( onFollowFlg ? 'follow' : 'follow-cancel' ).text( onFollowFlg ? 'フォロー中' : 'フォロー' );
    }
  }).fail(function (jqHR, textStatus, errorThrown) {
    console.log(XMLHttpRequest.status);
    console.log(textStatus);
    console.log(errorThrown);
  });
});

これであれば、同じような処理を一つの関数でまとめられるので、かなり処理がやりやすくなります。
三項演算子（?で条件分岐させてる部分）わかりずらかったら、ifで書き直しますので、お声掛けください。

Comments

[jiro-sima]

回答ありがとうございます
コードの平易さを優先させる為、採用は見送ることにしました
しかし異なるアプローチを認知することができたのでとても
参考になりました
重ねて感謝します