I'm getting a JSON element and building a list from its items like this:

getTitles: function(data) {

    data = data || {};

    var list = [];



    $.getJSON(

        '/titles',

        data,

        function(data) {

            $.each(data.data, function(key, val) {

                list.push(

                    '<li><a href='+ val.href +'>'+ val.title +'</a><span class=count>'+ val.count +'</span></li>'

                )

            });



            $('#title-items').html(list.join(''));

        }

    );

}

And I'm binding click event for a elements like this:

$('a').on('click', function(e) {

    alert('clicked');

    e.preventDefault();

});

Old a elements shows alert but new ones follow URL. Event handler doesn't work for new ones. How can I solve this?