0

昨日まで正常に動いたコードが今朝動かなくなってしまいました。
selectで選択するとボタンの値が変更され、間にconsole.logなどを入れるとそれも表示されるのでJavascript自体は正常に動いています。
しかしjsファイルの一番最後の行のclickイベントだけが動きません。
clickイベントの中にconsole.logを入れても何も表示されないため、clickイベントが動いていないことだけは確かです。
昨日動いた時はをformの中に入れていた時は動いたのですが、数時間後にボタンをクリックしたところ$("#sm").html("決定");と同じ動きをしたためformの外に出しましがそれでもダメでした。
どうすればよろしいでしょうか?
皆様の知恵をお借りしたいです。

$("#sm").html("決定");
→クリックすると別ページに飛ぶ

クリックイベント
→クリックするとchange_taglineを呼び出し、ボタンのテキストをtaglines配列の中からランダムに選んで変更する

fortune.ejs

<html>
  <head>
    <meta charset="utf8">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="siren.js"></script>
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>SIREN占い</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  </head>
  <body>
      <div id="contents">
      <h3>SIREN占いのページです。</h3>
    <p>シリーズを選択してください</p>
    <form action="/result" method="POST" id="form">
      <select id="select_series" name="selected_series">
        <option value="none" name="series">--選択してください--</option>
        <option value="one" name="series">SIREN</option>
        <option value="two" name="series">SIREN2</option>
        <option value="nt" name="series">SIREN:NT</option>
        <option value="all" name="series">全シリーズ</option>
      </select>
      <p><input type="number" min="1" max="5" value="1" name="times" id="number">回占う</p>
      <div id="sm"></div>
      
    </form>
    <div id="tagline"></div>
    <a href="/top">TOPに戻る</a>
    </div>
  </body>
</html>

siren.js

$(function(){
    const taglines = ["どうあがいても、絶望", "逃げ場なんて、ないよ", "息をすることさえ、恐怖"];
    //selectが変化した場合、ボタンの文字も変える
    $("#select_series").change(function(){
        let select = $("#select_series").val();
        switch(select){
            case "one":
                $("#sm").html("<button type='submit' id='select'>決定</button>");
                $("#select").text("全部…消してやる!");
                $("#tagline").html("");
                
                break;
            
            case "two":
                 $("#sm").html("<button type='submit' id='select'>決定</button>");
                $("#select").text("神風見せてやるよ!");
                $("#tagline").html("");
               
                break;
            
            case "nt":
                 $("#sm").html("<button type='submit' id='select'>決定</button>");
                $("#select").text("Go To Hell!");
                $("#tagline").html("");
                break;
            
            case "all":
                 $("#sm").html("<button type='submit' id='select'>決定</button>");
                change_tagline();
                $("#tagline").html("<button id='change'>変更</button>");
               break;
            
            default:
                $("#sm").html("");
                $("#tagline").html("");
                
        }
    });
    
    //全シリーズ選択時に、ランダムにボタンの文字をキャッチコピーに変換
    function change_tagline(){
        $("#select").text(taglines[Math.floor(Math.random() * taglines.length)]);
    }

    $("#change").click(function(){
        change_tagline();
    });
    
});

1 件の回答 1

2

click()はそのページに存在しているDOMに対してクリックイベントを検知する仕組みとその処理を付与します。
動的に要素が追加されるDOMの場合追加される場合は、追加されるたびにクリックイベントを付与する必要があります。

それを解決するためにはon()と呼ばれるものを利用して親要素に対してクリックイベントを検知してそのうえで該当の要素だった場合に処理を行う仕組みがあります。

$(function(){
    const taglines = ["どうあがいても、絶望", "逃げ場なんて、ないよ", "息をすることさえ、恐怖"];
    //selectが変化した場合、ボタンの文字も変える
    $("#select_series").change(function(){
        let select = $("#select_series").val();
        switch(select){
            case "one":
                $("#sm").html("<button type='submit' id='select'>決定</button>");
                $("#select").text("全部…消してやる!");
                $("#tagline").html("");
                
                break;
            
            case "two":
                 $("#sm").html("<button type='submit' id='select'>決定</button>");
                $("#select").text("神風見せてやるよ!");
                $("#tagline").html("");
               
                break;
            
            case "nt":
                 $("#sm").html("<button type='submit' id='select'>決定</button>");
                $("#select").text("Go To Hell!");
                $("#tagline").html("");
                break;
            
            case "all":
                 $("#sm").html("<button type='submit' id='select'>決定</button>");
                change_tagline();
                $("#tagline").html("<button id='change'>変更</button>");
               break;
            
            default:
                $("#sm").html("");
                $("#tagline").html("");
                
        }
    });
    
    //全シリーズ選択時に、ランダムにボタンの文字をキャッチコピーに変換
    function change_tagline(){
        $("#select").text(taglines[Math.floor(Math.random() * taglines.length)]);
    }

    $("#tagline").on("click", "#change", function(){
        change_tagline();
    });
    
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="contents">
      <h3>SIREN占いのページです。</h3>
    <p>シリーズを選択してください</p>
    <form action="/result" method="POST" id="form">
      <select id="select_series" name="selected_series">
        <option value="none" name="series">--選択してください--</option>
        <option value="one" name="series">SIREN</option>
        <option value="two" name="series">SIREN2</option>
        <option value="nt" name="series">SIREN:NT</option>
        <option value="all" name="series">全シリーズ</option>
      </select>
      <p><input type="number" min="1" max="5" value="1" name="times" id="number">回占う</p>
      <div id="sm"></div>
      
    </form>
    <div id="tagline"></div>
    <a href="/top">TOPに戻る</a>
    </div>

ちなみに、昨日までは正しく動いていて今日から急に動かなくなったということはなくて、同じソースコードであれば時間経過で変わることはないでしょう。
おそらく動的にボタンを追加したかイベントの設定を変えたかで何かしら動かなくなったと推察されます。
何をどう変更したのか、理解することで原因を追うことも容易になります。
是非質問をする際には、何をどう変えたかも記述するとより良いでしょう。

1
  • ありがとうございます!無事に解決いたしました! Commented 2021年6月25日 7:13

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。