Why is the element created but not rendered by JS in any way?

Question

JavaScript

There is a code that creates a block

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

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

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

Some code that should create elements, and then freely access them. But in fact, if you create an HTML span element in advance, then it is drawn without problems, but if it is created by JS, then nothing happens. Thanks

Answer 1

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

But this will bind to all spans, I think you know what to do next.

Answer 2

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

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

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