jqueryでボタンのクラスを切替るとクリックイベントが起きない

Question

HTMLで「hide_button」というクラスがついているボタンに対して、
特定の要素（「hide」というクラスの要素）を隠し、同時にクラスを
切り替えて、再度ボタンクリックで要素を表示させる、ということを
したいのですが、クラス切替後にボタンをクリックしてもイベントが
置きません。

JSのコードは下記のとおりで、クラス切り替え後にボタンをクリックしても
何も起きないので、ためしにalertを出そうとしても出ない状態です。

<!-- ボタン画像 -->
<img src="img/button.jpg" class="hide_button">

<script type="text/javascript">
	$(function() {
		$('.hide_button').click(function() {
			$('.hide').hide();
			$(this).css('opacity', '0.5').removeClass('hide_button').addClass('show_button');
		});
				
		$('.show_button').click(function() {
			alert('test');
		});
	});
</script>

誤植等はないと思うので、何がおかしいのか教えていただきたいです。

よろしくお願いします。

【追記】
ボタンのHTMLを追記しました。
このボタンのクラスを切り替えて、クラスによって別のイベントを起こそうとしています。

Comments

[m.ts10806]

htmlもご提示ください。

Answer 1

動的要素（つまりスクリプトにより現れたり消えたりするもの）にイベントを付与する場合はdocumentなどからイベントを付与する必要があります。

• 動的に生成したDOM要素に対してjQueryでイベントを設定する場合

$(document).on("click",".show_button",function(){
    alert("show");
});

Answer 2

普通にclick()でイベントリスナーが登録される要素は
click()が実行された時にそのセレクタに引っかかったもの

click()が実行されるより後にそのセレクタに引っかかるようになったものは対象外

それをやりたい場合は例えば

$('form').on('click','.show_button',function(){
  alert('test');
});

みたいな感じに

これでform要素の子孫要素がクリックされた時
クリックされた要素が.show_buttonに引っかかるものだった時に
イベントリスナー実行というようになる

Answer 3

「.show_button」に対してclickイベントを設定するときに、「.show_button」を持つエレメントが無いからだと思います。