jQuery append html не работает после первого

Question

Так что я сожалею, что заголовок настолько расплывчатый, что я даже не уверен, как сформулировать этот вопрос всего несколькими словами.

У меня есть форма для добавления элементов в интернет-магазин. В пределах этой формы есть возможность добавить различные разновидности продукта, скажем, разных размеров или цветов для одежды и т. Д.

Я хотел только предложить поле для первой разновидности onload, затем кнопку «добавить» для отображения дополнительного поля для каждого другого желаемого сорта.

После того, как вы нажмете кнопку добавления, старая кнопка добавления станет кнопкой вычитания, а новое поле ввода, а также новая кнопка добавления добавляются к предыдущей.

Я хотел бы, чтобы этот процесс работал непрерывно.

При добавлении первого нового поля процесс работает отлично, однако добавление дополнительных элементов не работает должным образом. Добавлены новые поля, а также новые кнопки добавления, однако старые кнопки добавления не преобразуются в кнопки вычитания. Я действительно не знаю, в чем проблема. Я не совсем мастер jquery.

Вот соответствующая часть формы:

<label for="varieties">Varieties</label><input type="text" name="varieties[]" id="varieties1" value="Default" /> <a href="#" class="add-variety"><img src="../img/plus.png" alt="Add" title="Add Another Variety" /></a><br /> 

И вот JQuery, что я написал:

$('a.add-variety').click(function() { 
    $(this).removeClass('add-variety'); 
    $(this).addClass('subtract-variety'); 
    $(this).append('<br /><input type="text" name="varieties[]" value="Default" /> <a href="#" class="add-variety"><img src="../img/plus.png" alt="Add" title="Add Another Variety" /></a>'); 
    $(this).children('img').attr('src','../img/minus.png'); 
    return false; 
}); 

спасибо за любую помощь!

Answer 1

Ваша функция «добавить разнообразие» только связан с элементом «.add-сорт» один раз, когда страница загружена. Любые вновь созданные кнопки «добавить разновидность» не привязывают к ним никакого кода, поскольку они создаются после загрузки страницы. Возможно, вы захотите использовать функцию live вместо click.

Другая проблема, как вы указали, заключается в том, что вы добавляете дополнительные строки внутри своего a элементов вместо последующих.

Я бы рекомендовал обернуть все это в тег div, чтобы дать вам легкий доступ к каждой строке. Это позволит вам удалить дубликат кода, скопировав HTML-строку существующей строки, вместо того, чтобы включать ее снова в код JavaScript.

Вот мой предложенный вариант:

<div> 
    <label for="varieties">Varieties</label><input type="text" name="varieties[]" id="varieties1" value="Default" /> <a href="#" class="add-variety"><img src="../img/plus.png" alt="Add" title="Add Another Variety" /></a><br /> 
</div> 

И JQuery:

$(function() { 
    $('a.add-variety').live('click', function() { 
     $(this).removeClass('add-variety'); 
     $(this).addClass('subtract-variety'); 

     var parent = $(this).parent(); 
     parent.after($('<div />').html(parent.html())); 

     $('img', this).attr('src','../img/minus.png'); 
    }); 
}); 

Я использовал $(string, element) вместо children, чтобы получить доступ к югу от образа - Я не уверен, если это поможет с проблемой минус-изображения, но я обнаружил, что эта форма работает немного лучше, поскольку она включает в себя все соответствующие подэлементы элемента, а не только ближайшие дети.

Answer 2

К сожалению у меня нет Anwer на ваш вопрос пока нет, но есть вопрос, что ошибки мне ...

Не было больше смысла «» добавьте в начале кнопку вычитания? Таким образом, ваш код будет:

$('a.add-variety').click(function() { 
$(this).prepend('<input type="text" name="varieties[]" value="Default" /> <a href="#" class="subtract-variety"><img src="../img/minus.png" alt="Reomve" title="Remove a Variety" /></a><br/>'); 

});

И я не думаю, что вы готовы «возвращать» что-либо в этом блоке jQuery.

Answer 3

$ (this) .append говорит добавить что-то к СОДЕРЖАНИЮ текущего элемента (в данном случае, the).

$ (это) .После может быть то, что вы ищете ...

Кроме того, новые элементы, добавленные к йот не будет иметь обработчики кликов, поэтому вам придется применить код обработчика нажмите к новым элементам.

Answer 4

Чтобы ответить на 2-й вопрос:

Вы можете выполнить манипуляцию на «родительском» уровне:

$('a.add-variety').parent().click(function() { 
    ... 
});