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

Question

[GennadyPHP]

Есть код, который создает блок

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

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

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

Некий код, который должен создавать элементы, а потом беспрепятственно к ним обращаться. Но на деле, если создать HTML элемент span заранее, то обращается без проблем, но если его создает JS, то ничего не получается. Спасибо

Comments

[Глеб Старков]

Во время работы ready span еще нет

[GennadyPHP]

Глеб Старков, а как это исправляется?

[Глеб Старков]

Нужно вешать click по моему после создания элемента

Answer 1

[Дмитрий]

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

Но это привяжется ко всем span, думаю дальше знаете, что делать.

Comments

[GennadyPHP]

это пример кода)

[Денис Васильев]

span и click нужно поменять местами

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

Нужно почитать про делегирование событий

[Дмитрий]

Денис Васильев, прошу прощения, точно.

Answer 2

[VoidVolker]

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

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

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

Comments

[Никита Егоров]

не успел...