【JS】slickの停止ボタンと再生ボタンを画像切り替えで実装したい

Question

slick（https://kenwheeler.github.io/slick/）について質問になります。

停止ボタンと再生ボタンを画像の切り替え処理で実装したい考えています。
初回の停止の画像をクリックした際に画像が再生ボタンに切り替わりスライドが停止されるのですが、再生が動かない状態です。

<button type="buttons"><img src="images/stop.png" class="js-stop img-change"></button>
↓クリック後（再生ボタンに切り替わり、停止）
<button type="buttons"><img src="images/play.png" class="img-change js-play"></button>
↓クリック後（停止ボタンに切り替わるが、再生されない）
<button type="buttons"><img src="images/stop.png" class="js-stop img-change"></button>

【停止と再生の動きJS】
・参考サイト
https://tr.you84815.space/slick/methods/slickPause.html

$('.js-stop').on('click', function() {
$('.slider-for').slick('slickPause');
});

$('.js-play').on('click', function() {
$('.slider-for').slick('slickPlay');
});

【画像の切り替えJS】
・参考サイト：
https://blog.kannart.co.jp/coding/1578/

$(function(){
	$('.img-change').click(function(){
		if($(this).hasClass('js-play') == false){
			$(this).attr('src', 'images/play.png').addClass('js-play').removeClass('js-stop');
		}else{
			$(this).attr('src', 'images/stop.png').addClass('js-stop').removeClass('js-play');
		}
	});
});

ご教授頂けますと幸いです。
よろしくお願いいたします。

Answer 1

img.js-playが存在しないタイミングでイベントリスナを付けようとしているからです。
解決方法としては、こんな所でしょうか。
1.img要素を入れ替える時にイベントを付け替える
2.imgの親のbutton要素のイベントリスナでどちらの状態かを判断する

Comments

[neko-neko]

ありがとうございました。
下記に変更し確認できたのですがIE11のみクリックしても反応しない状態です。

$('.img-change').click(function () {
if ($(this).hasClass('img-play') == false) {
$(this).attr('src', 'images/play.png').addClass('img-play').removeClass('img-stop');
$('.js-stop').on('click', function () {
$('.slider-for').slick('slickPause');
});
} else {
$(this).attr('src', 'images/stop.png').addClass('img-stop').removeClass('img-play');
$('.js-play').on('click', function () {
$('.slider-for').slick('slickPlay');
});
}
});

$('button').click(function () {
if ($(this).hasClass('js-play') == false) {
$(this).addClass('js-play').removeClass('js-stop');
} else {
$(this).addClass('js-stop').removeClass('js-play');
}
});

何かおかしい箇所がございましたら、ご指摘いただけますと幸いです。
よろしくお願いいたします。

[AT_2nd]

すみません、誤解を招く書き方でした。解決方法は、1か2のどちらかだけで十分です。
IE11については全く触っていないので、対処方法は私も分からないです。