如何在jquery中添加dinamically元素

Question

我有这个简单的代码

$(function() {
    $('.add').click(function() {
        $('.accounts').append(`
                <div class="col s4 account">
        <div class="card-panel grey lighten-5 z-depth-1">
            <div class="row valign-wrapper">
                <div class="col s2">
                    <img src="images/pic.png" alt="" class="circle responsive-img materialboxed">
                    <!-- notice the "circle" class -->
                </div>
                <div class="col s10">
                    <div class="input-field">
          <input id="nme" type="text" class="validate">
          <label for="nme">Name...</label>
        </div>
                </div>
            </div>
        </div>
    </div>
        `);
    });
    $('.account').click(function() {
        alert();
    });
});

我的问题是，当我点击一个带有.add类的元素时，会创建一个新的div.account元素，当我点击该元素（.account）时，不会显示任何警告。在单击“添加”按钮之前，最初存在一个div.account元素。它显示警报但不显示脚本生成的其他警报。我在哪里出错或者我该怎么办？