使用jquery,无法添加使用innerhtml创建的单击到按钮的行为

我有一些按钮,我用jquery在所有按钮上添加了一些单击行为,它们工作得很好,但是现在这些按钮是通过更改 innerHTM 有脚本的DIV的L,行为不再有效

下面是一个例子,每次我单击这两个按钮中的任何一个,它都会显示一个带有消息的警报 'clicked' .

$('.foo').on('click', function(){
    alert('clicked');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="home">
    <button class='foo' > Test </button>
    <button class='foo' > Test </button>
</div>

但是如果我通过改变 innerHTML 在家里用按钮生成,它不再工作了

Fiddle

$(".gen").on("click", function(){
   $('.home').html(
     "<button class='foo' > Test </button>" +
     "<button class='foo' > Test </button>");
})


$('.foo').on('click', function(){
    alert('clicked');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <button class="gen" > Generate  </button>
</div>

<div class="home">

</div>

我真的不知道发生了什么事

$(".gen").on("click", function(){ $('.home').html( "<button class='foo' > Test </button>" + "<button class='foo' > Test </button>"); }) $(document).on('click', '.foo', function(){ console.log('clicked'); });