

JavaScriptで要素を追加した後に、追加した要素がクリックされるとjQueryでclassがつくようにしたいのですがどうしたらいいのでしょうか？  
以下のコードが動かなくて困っています。

HTML

[code]

    <h1>テスト</h1>
    <div id="test"></div>
    
[/code]

JavaScript&jQuery

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script>
    (function(){
      'use strict';
    
        function show(){
        var div_element=document.createElement("div");
        div_element.id="hogehoge";
        div_element.innerHTML='あいうえお';
        var parent_object=document.getElementById('test');
        parent_object.appendChild(div_element);
      }
    
      addEventListener('load', function(){
        show();
      });
    
      $("#hogehoge").on("click", function(){
      $("#hogehoge").toggleClass("hogehoge");
      });
    
    })();
    </script>
    
[/code]


CC BY-SA 3.0
2016-08-05T00:12:53.753
28072
2016-08-05T15:15:42.320
2016-08-05T00:24:00.983
5750
18387
question
javascript jquery
JavaScriptで追加した要素にjQueryでclassを追加する方法


おそらく（実際に試していません）`.on`が実行される時に`"#hogehoge"`（で示す要素）が存在しないことが原因かと思います。

jQuery で以下の様な感じでいいと思います。

[code]

    <script>
    $(function(){
        'use strict';
    
        $("#test").append("<div id='hogehoge'>あいうえお</div>");
        $("#hogehoge").on("click", function(){
            $("#hogehoge").toggleClass("hogehoge");
        });
    });
    </script>
    
[/code]


CC BY-SA 3.0
2016-08-05T00:43:10.960
28073
2016-08-05T00:43:10.960
5044
28072
answer


処理の実行順が誤っています。

`addEventListener`で登録している`window.onload`イベントは該当HTMLおよびHTMLから参照されている画像その他のリソースが全て読み込まれたときに発生します。これに対して、

> $("#hogehoge").on("click", function(){  
>  $("#hogehoge").toggleClass("hogehoge");  
>  });

このステートメントは`<script>`タグ内の通常の呼び出しで実行されるため、HTMLを先頭から順に解析していって、該当タグが読み込まれたタイミングで実行されます。なのでこの時点で`window.onload`は発生しておらず、`#hogehoge`にマッチするエレメントも存在しません。

なので該当処理を`show()`の直後に行うか、あるいは`jQuery.on`のオーバーロードを使用して

[code]

    $(document).on("click", "#hogehoge", function(){
        $("#hogehoge").toggleClass("hogehoge");
    });
    
[/code]

とその時点で存在する親要素に対して`"#hogehoge"`セレクターを指定して`jQuery.on`を呼び出す必要があります。


CC BY-SA 3.0
2016-08-05T00:43:11.497
28074
2016-08-05T00:43:11.497
5750
28072
answer


解決されましたか？？  
さくっとスニペット作ってみましたので確認してみてください｡  
※クラスが付加されていることを視覚的に確認するために､CSSで色をつけています｡

[code]

    $(function(){
      'use strict';
    
      function show(){
        var div_element=document.createElement('div');
        div_element.id='hogehoge';
        div_element.innerHTML='あいうえお';
        var parent_object=document.getElementById('test');
        parent_object.appendChild(div_element);
      }
     
      // 動的に追加したDOMにはon()を使う必要があります
      $(document).on('click', '#hogehoge', function(){
        $('#hogehoge').toggleClass('hogehoge');
      });
    
      show();
    
    });
[/code]

[code]

    .hogehoge {
      color : red;
    }
[/code]

[code]

    <!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv='content-type' content='text/html; charset=utf-8'>
        <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
      <title>toggleClass</title>
      </head>
      <body>
        <div id='test'></div>
      </body>
    </html>
[/code]


CC BY-SA 3.0
2016-08-05T15:15:42.320
28090
2016-08-05T15:15:42.320
12256
28072
answer