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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>テスト</h1>
    <div id="test"></div>

    <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>

  </body>
</html>