JavaScriptで追加した要素にjQueryでclassを追加する方法


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]




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

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

[code]

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

