Кнопка работает только один раз, почему?

Question

[Alexey]

Я имею определенное количество строк:
var goal_index = 2;И я имею функцию которая создает эти строки, по умолчанию 2 строки (goal_index). В каждой строке у меня находиться 2 кнопки удалить и добавить.
Добавить всегда ставиться к последней добавленной строке.

// Creating Goals
        var goals_creating = function(){
            var goals_area = $('.goalsArea'),
                add_button = $('<span class="add_btn"></span>'),
                trash_button = $('<span class="trash_btn"></span>');

            goals_area.html('');

            for(var i = 0, j = 1; i < goal_index; i++, j++ ){
                goals_area.append(
                    '<div class="row" data-trashgoal = ' + i + '>' +
                        '<div class="col-lg-1">' +
                        '<span class="trash_btn" data-trashgoal = ' + i + '></span>' +
                        '</div>' +
                    '</div>'
                );
            }
            // Last trash tag
            var last_trash_btn = $('.trash_btn').last();
            // Insert after last trash button
            last_trash_btn.after(add_button);
        };

После чего я запускаю функцию:

goals_creating();

И затем вешаю два обработчика на кнопки (Добавить) и (Удалить).

$('.add_btn').on('click', function(){
        goal_index++;
        goals_creating();
    });

    $('.trash_btn').on('click', function(){
        var goal_to_del = $(this).data('trashgoal');
        $('.row[data-trashgoal="' + goal_to_del + '"]').remove();
        goal_index--;
        goals_creating();
    });

Но вот беда, кнопка Добавить или Удалить, работают всего один раз, и все... После чего при нажатии, ничего не происходит...
Коллеги, как исправить данное неудобство?

Answer 1

[Alexey]

$(document).on('click', '.add_btn', function() { /* as before */ });

$(document).on('click', '.trash_btn', function() { /* as before */ });

Answer 2

[Рустамка Воронцов]

$('.add_btn').live('click', function(){
        goal_index++;
        goals_creating();
    });

    $('.trash_btn').live('click', function(){
        var goal_to_del = $(this).data('trashgoal');
        $('.row[data-trashgoal="' + goal_to_del + '"]').remove();
        goal_index--;
        goals_creating();
    });

Comments

[Alexey]

Спасибо за ответ. Интересный подход.

[Константин Китманов]

live устарел еще две версии назад и в последней версии отсутствует.
Используйте всегда .on, будет щастье.

[Рустамка Воронцов]

Константин Китманов: jQuery 1.9 и выше мало кто использует, я недавно и .delegate видел)

[Константин Китманов]

Рустамка Воронцов: ужас%)