У меня есть функция для добавления и удаления поля, но функция удаления не работает как-то.

HTML:

<div id="parts">
    Part
    <input type="text" id="auto_part" name="auto_part" />
                <br />
    Description
    <input type="text" id="auto_description" name="auto_description" />
                <br />
</div>
    <a href="#" id="addField">Add another part</a>

JQuery:

$(function() {
var scntDiv = $('#parts');
var i = $('#parts input').size();

$('#addField').on('click', function() {
    $('<br /><div id="parts"><span>Part</span> <input type="text" id="auto_part'+i+'" name="auto_part'+i+'" /><br />').appendTo(scntDiv);
    $('<span>Description</span> <input type="text" id="auto_description'+i+'" name="auto_description'+i+'" /> <br />').appendTo(scntDiv);
    $('<input type="hidden" id="row_count" name="row_count" value="" />').appendTo(scntDiv);
    $('<a href="#" id="removefield">Remove</a></div>').appendTo(scntDiv);
    i++;
    return false;
});

$('#removefield').on('click', function() { 
    if( i > 2 ) {
            $(this).parents('div').remove();
            i--;
    }
    return false;
});
});

Проблема должна быть связана с этой строкой:

$('#removefield').on('click', function() {

Это не проходит это условие. Когда я нажимаю «Удалить», он вообще ничего не делает, он просто прокручивается вверх.

3
Sinan Samet 2 Фев 2013 в 02:48

2 ответа

Лучший ответ

Вы связываете обработчик click с элементами, присутствующими в DOM. Но ваш #removefield элемент добавляется динамически. Таким образом, обработчик событий не привязан к нему.

Вы можете использовать .on(), чтобы использовать делегирование события и обрабатывать также будущие элементы. Также вы можете захотеть использовать имена классов вместо атрибутов и id. Атрибуты id должны быть уникальными, но вы можете установить в качестве имени класса столько элементов, сколько захотите.

<a href="#" class="removefield">Remove</a>
$("#parts").on("click", ".removefield", function() { 
  /* ... */
});

Причина, по которой ваша ссылка "Remove" не работает, заключается в том, что вы добавляете динамический элемент <div> по частям, что делает его недействительной разметкой. Вы должны добавить все это сразу. Например,

$('#addField').on('click', function () {
    var part = '<div id="parts' + i + '"><span>Part</span> <input type="text" id="auto_part' + i + '" name="auto_part' + i + '" /><br/>' +
        '<span>Description</span> <input type="text" id="auto_description' + i + '" name="auto_description' + i + '" /> <br />' +
        '<input type="hidden" id="row_count' + i + '" name="row_count' + i + '" value="" />' +
        '<a href="#" class="removefield' + i + '">Remove</a></div>';
    scntDiv.after(part);
    i++;
    return false;
});
$(document).on("click", ".removefield", function() {
    if( i > 2 ) {
        $(this).parent('div').remove();
        i--;
    }
    return false;
});

Вы можете видеть это здесь.

4
Alexander 2 Фев 2013 в 14:18

Пытаться

$('#removefield').live("click", function() {
0
Graham.Fraser 1 Фев 2013 в 22:52