目次をクリックすると、YouTube動画の表示が変わるjavascriptを実行したいが、クリックイベントが発火しない。

Question

固定ページにSmart Custom Fieldsのフィールドの値を取得し表示させています。

目次をクリックしても、クリックイベントが発火せず、
真っ白な画面にこのような文字が表示されます。
「Not Found
The requested URL was not found on this server.」

javascriptやphpの記述が間違っているようなエラー表示は出ていません。

下記、カスタムテンプレートの記述です。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>		
<script>
$(function(){
		$(document).on("click", '.moviechange', function () {
  		var id = $(this).attr('href');
  		$(".iframe").attr("src","https://www.youtube.com/embed/" + id );
  		return false;
});
});	
</script>
	
<div class="left">
<?php
    $YouTube = SCF::get('YouTube');
    foreach ($YouTube as $fields) { 
        if($fields['youtube_title'] !== "" and $fields['youtube_link']!== ""){
?>

<li>
<a class="moviechang" href="<?php echo $fields['youtube_link']; ?>"><?php echo $fields['youtube_title']; ?></a>
</li>
<?php
        }
    }
?>
</div> 	

<div class="right">
<iframe width="560" height="315" src="https://www.youtube.com/embed/<?php echo $fields['youtube_link']; ?>" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</div>   

目次にカーソルを合わせると、aタグのリンク先が表示されますが、
どうもjavascriptのクリックイベントが紐づいていないようです。

javascriptは初心者です。
どうか、どなたか教えていただけませんか。

Answer 1

$(".iframe")としてるのにiframeにclass="iframe"がなくないですか？

さらにtypo

<a class="moviechang" 
↓
<a class="moviechange" 

Comments

[LLoo]

>class="iframe"がなくないですか？

<iframe>タグにclass指定と
moviechang「e」のスペルミスを修正し、動きました！！！

ありがとうございました！！！！！！！