jQuery 親要素へのonclickがあるとき、append等で追加した後の子要素でonclickを適応させたい


例えば、以下のようなコードにおいて追加したところをクリックしてもアラートを出したいです。

hoge.html

[code]

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <link href="hoge.css" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="hoge.js"></script>
      </head>
      <body>
        <div class="hogehoge">
          この中をクリックして
          <p class="fugafuga">元からある</p>
        </div>
      </body>
    </html>
    
[/code]

hoge.js

[code]

    $(function(){
        $('.hogehoge').on('click', function() {
            $(this).append('<p class="fugafuga">追加した</p>');
            return false;
        });
    
        $('.fugafuga').on('click', function() {
            alert('fugafuga');
            return false;
        });
    });
    
[/code]

hoge.css

[code]

    .hogehoge {
        border: 1px solid black;
    }
    
    .fugafuga {
        width: 5em;
        border: 1px solid red;
    }
    
[/code]

追加用にボタンなどの要素を追加したり親子の関係でなくりたりすればできそうですが、  
あまりhtml部分は変更したくありません。  
他に方法はありますでしょうか。  
よろしくお願い致します。




ita_3yさんのように追加要素にイベントを組み込む方法もありますし、もしくは以下のように親要素にイベント処理を委譲する方法もあります。

[code]

    $(function(){
        $('.hogehoge').on('click', function() {
            $(this).append('<p class="fugafuga">追加した</p>');
            return false;
        });
    
        $('.hogehoge').on('click', '.fugafuga', function() {
            alert('fugafuga');
            return false;
        });
    });
[/code]

[code]

    .hogehoge {
        border: 1px solid black;
    }
    
    .fugafuga {
        width: 5em;
        border: 1px solid red;
    }
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="hogehoge">
      この中をクリックして
      <p class="fugafuga">元からある</p>
    </div>
[/code]

