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

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

HTML

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

JavaScript&jQuery

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