jQuery doesn't catch the event

Question

I am trying to use following code but my jquery selection doesn't catch the click event

$('#addLevel').on('click', function() {
    var div = '<div class="form-inline">';
    var addButton = '<button  class="btn btn-success addItems" onclick="alert()" type="button">Добавить</button>';
    div += addButton;
    div += '</div>';
    $('#levels').append(div);
});
//I assume following code is not working but why?
$('.addItems').eq(0).on('click', function() {
    alert('clicked');
});

Thank you

make sure the script is executed on dom ready and the `#addLevel` element is present in the dom at that time — Arun P Johny, Jun 27 '14 at 10:57
Use [event delegation](http://learn.jquery.com/events/event-delegation/): `$(document).on('click', '.addItems:first', ...`. Otherwise the button doesn't exist when you attempt to attach the click handler to it. — blgt, Jun 27 '14 at 10:58
possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — JJJ, Jun 27 '14 at 11:00

score 1 · Accepted Answer · answered Jun 27 '14 at 11:02

Then you try to add handler to .addItems there is no such DOM nodes. As @blgt said you must use event delegation:

$(document).on('click', '.addItems:first', function() {
    alert('clicked');
});

P.S. Better use any parent node of .addItems:first instead of document.

jQuery doesn't catch the event

1 Answers1