how to add elements dinamically in jquery

Question

I have this simple code

$(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();
    });
});

My problem is, when I click on an element with a .add class, a new div.account element is created and when I click on the element(.account), no alert is shown. There is one div.account element that exists initially before clicking the add button. It shows an alert but not others generated by the script. Where I'm I going wrong or what should I do?

You're attempting to attach the event handlers at a point *before* the elements exist. You need to use a delegated event handler instead. See the marked duplicate for more information — Rory McCrossan, Apr 04 '17 at 15:03

how to add elements dinamically in jquery

0 Answers0