Почему элемент создается, но никак не обрабатывается JS?

$(document).on("span", 'click', function() {
         alert($(this).text()); // не возвращает нужного результата.
});

var buttonid = 0; // глобальная переменная где-то вначале 

$(document).ready(function(){
    $("#addbutton").click(function(){
        var item = $('<span>Кнопка '+buttonid+'</span>');
        $(".block").append(item);
        buttonid++;

        item.click(function(){
             alert($(this).text());
        })
    });
});