Почему alert вызывается несколько раз?

Question

[hakkol]

Доброго времени суток, есть кнопка, которая по клику вызывает форму с одной кнопкой. При нажатии на кнопку "удалить форму" - удаляется форма. Когда для кнопки удаления сделал предупреждающее окно, то обнаружил следующую проблему - оно может вызваться несколько раз. Если создам 10 форм, то при нажатии на удаление первой формы, предупреждение появиться 10 раз. Почему код работает именно так и как можно устранить эту проблему?

var i = $('.form').size();

    $('#add_form').click(function() {
        i = $('.form:last').attr('id');
        ++i;
        $('<div id="'+ i +'" class="form">\n' +
            '<input type="text" class="form_input form-control" " placeholder="Название формы"/>\n' +
            '<textarea class="form_input form-control" rows="5"  placeholder="Описание формы"></textarea>\n' +
            '<span class="remove_form btn btn-danger">Удалить форму</span>\n' +
            '</div>') .
        fadeIn('slow').appendTo('.all_form');

        $('.remove_form').click(function() {
            if (confirm("Вы хотите удалить форму?") == true) {
                $($(this).parent('.form')).remove();
                i--;
            }
        });

    });

Answer 1

[Алексей Уколов]

Дело в том, что вы обработчик удаления зачем-то ставите внутри обработчика добавления. Нужно делать так:

$('#add_form').click(function() {
    var i = ($('.form:last').attr('id') || 0) + 1;
    $('<div id="'+ i +'" class="form">\n' +
        '<input type="text" class="form_input form-control" " placeholder="Название формы"/>\n' +
        '<textarea class="form_input form-control" rows="5"  placeholder="Описание формы"></textarea>\n' +
        '<span class="remove_form btn btn-danger">Удалить форму</span>\n' +
        '</div>')
    .fadeIn('slow').appendTo('.all_form');
});

$('.remove_form').click(function() {
    if (confirm("Вы хотите удалить форму?")) {
        $(this).closest('.form').remove();
    }
});

P.S. Обратите внимание, я в вашем коде поправил еще некоторые странности.

Comments

[hakkol]

изначально я выносил remove_form за пределы add_form, но тогда у меня кнопка "удалить форму" не работает

[Алексей Уколов]

hakkol: А, ну да, нужно делегировать обработчик удаления какому-то родительскому элементу, который не удаляется и не добавляется на страницу динамически.

[Алексей Уколов]

Что-то вроде этого:$('.all_form).on('click', '.remove_form', func());

[hakkol]

сделал вот так

$('#add_form').click(function() {
    var i = ($('.form:last').attr('id') || 0) + 1;
    $('<div id="'+ i +'" class="form">\n' +
        '<input type="text" class="form_input form-control" " placeholder="Название формы"/>\n' +
        '<textarea class="form_input form-control" rows="5"  placeholder="Описание формы"></textarea>\n' +
        '<span class="remove_form btn btn-danger">Удалить форму</span>\n' +
        '</div>')
    .fadeIn('slow').appendTo('.all_form');
});

$('.all_form').on('click', '.remove_form', function() {
    if (confirm("Вы хотите удалить форму?" == true)) {
        $($(this).parent('.form')).remove();
         i--;
    }
});

все работает, спасибо

[Алексей Уколов]

hakkol: возьмите для удаления тот код, который я в ответе привел. Во-первых, нет никакого смысла оборачивать $(this).parent('.form') в $(), во-вторых, гораздо лучше использовать closest, а не parent - код не сломается, если вы добавите дополнительные обертки, в-третьих, переменной i в этой функции не существует.

Answer 2

[Денис Инешин]

Потому что вы не должны создавать обработчик клика remove_form внутри обработчика клика add_form. Вынесите наружу.