#javascript #jquery #html #css
#javascript #jquery #HTML #css
Вопрос:
У меня есть div input файл, внутри которого есть файл. Если пользователь выбирает файл div , должен появиться другой, позволяющий пользователю выбрать другой файл. Но, когда пользователь выбирает файл, элементы удваиваются, а не создается только один.
<div class="gal">
<div class="gal-stf">
<input class="plus-n" type="file">
</div>
</div>
$(".gal").on("click", ".plus-n", function () {
$(this).last().change(function () {
$('.gal').append($(".gal-stf").first().clone(true));
});
});
Комментарии:
1. Ваша проблема заключается в том, что когда
inputсоздается новое, в нем уже есть файл. Правильно?2. да, а также то, что создается не только один ввод. если был создан один, создается другой, если 2 созданы еще 2, затем 4, затем 8. @fin444
Ответ №1:
Ваша проблема в том, что вы используете a .clone(true) вместо .clone(false) . Когда вы клонируете его с true помощью параметра, вы дублируете элемент и его прослушиватели событий, а затем добавляете к элементу еще один прослушиватель событий. Это означает, что при взаимодействии с ним прослушиватель событий запускается два раза, создавая два новых элемента. Затем четыре раза, создавая четыре новых элемента.
Чтобы устранить эту проблему, просто продублируйте элемент без прослушивателей событий, вот так.
$(".gal").on("click", ".plus-n", function () {
$(this).last().change(function () {
$('.gal').append($(".gal-stf").first().clone(false));
});
});
Комментарии:
1. большое вам спасибо, но проблема, о которой вы говорили раньше, что при создании нового ввода в нем уже есть файл, все еще существует
2. Чтобы устранить эту проблему, добавьте новый элемент вместо копии.
$('.gal').append('<div class="gal-stf"><input class="plus-n" type="file"></div>');3. есть ли другой способ сделать это, просто вызвав имя класса, потому что в исходном коде около 40 строк
4. Попробуйте создать элемент шаблона с
hiddenклассом. Продублируйте этот элемент, а затем вставьте его в конец сhiddenклассом.