on() не работает с живыми данными с использованием jQuery, как?

Question

У меня есть некоторые динамические данные, которые добавляются в список, и любые ссылки в этих данных, кажется, не работают.

я использую jquery 1.8.3 и on() следует учитывать live метод, я думаю

setInterval(function () {
    getNot();
}, 2000);

function getNot() {
    var data = {
        t1: 'test1',
        t2: 'test2',
        t3: 'test3'
    };
    var size = 0,
        li = '';
    $.each(data, function (k, v) {
        li += '<li>' +
            '<a href="#" class="add" data-listid="' + k + '">' +
            '<h2>load data - ' + k + '</h2>' +
            '</a>' +
            '</li>';
        size++;
    });

    var but = $('#not'),
        ul = $('#not_ul');

    but.find('span').text(size + ' Notifications');
    ul.html(li);
    ul.listview().listview("refresh");
}

// this doesn't seem to work
$('.add').on("click", function () {
    var listId = $(this).data('listid');
    console.log(listId);
    return false;
});

см полный пример здесь

есть идеи по этому вопросу?

Answer 1

$('.add').on("click", function () {

Вам нужно пройти селектор, чтобы сделать on создать событие делегата:

$('#{containerId}').on("click", '.add', function () {
    var listId = $(this).data('listid');
    console.log(listId);
    return false;
});

containerId должен быть ближайшим статическим элементом к динамически создаваемому .addэлементы.