Добрый день. У меня такой вопрос:
На одной из страниц своего сайта я хочу, чтобы пользователи отправляли фотографии переменного количества (т.е. можно отправить 1 файл, можно 5, можно 15 и т.д.). Есть поле для ввода файла (type='file'), рядом кнопочка "+" (для добавления еще одного input'a для файла). Вот эта часть формы:
<input type='file' name='photo[]' value='' /> <a class='add' href='#' target='_self'><b>+</b></a>
То есть, если человек хочет добавить еще поле. он нажимает на плюсик.
jQuery код:
$(document).ready(function(){
$('.add').click(function() {
var new_input = document.createElement("input");
new_input.setAttribute('type', 'file');
new_input.setAttribute('name', 'photo[]');
new_input.setAttribute('value', '');
var new_a = document.createElement("a");
new_a.setAttribute('href', '#');
new_a.setAttribute('class', 'add');
new_a.setAttribute('target', '_self');
var new_b = document.createElement("b");
var b_inner = document.createTextNode('+');
new_b.appendChild(b_inner);
$(this).after(new_a).after(new_input).after('<br>');
new_a.appendChild(new_b);
});
});
То есть, как только готов DOM, после нажатия на элемент с классом 'add', выполняется функция, которая добавляет после кнопки "+"
<br /><input type='file' name='photo[]' value='' /> <a class='add' href='#' target='_self'><b>+</b></a>
То есть, такой же код + <br /> в начале.
Но теперь после нажатия на новый плюсик, ничего не произойдет, т.к. функция находится внутри функции $(document).ready(function(){.... для которой DOM был определен после загрузки страницы.
Соответственно вопрос - как заставить jQuery после добавления нового поля обновить DOM?
PS я знаю менее красивый способ сделать то же самое, но хотелось бы именно при помощи jQuery как-то это красиво реализвать...
Спасибо за ответы.
Примечание:
Сделал так. Слешами - то, где добавлены строки кода.
Спасибо за ответ.
$(document).ready(function(){
$('.add').click(t = function() { ////////// t =
var new_input = document.createElement("input");
new_input.setAttribute('type', 'file');
new_input.setAttribute('name', 'photo[]');
new_input.setAttribute('value', '');
var new_a = document.createElement("a");
new_a.setAttribute('href', '#');
new_a.setAttribute('class', 'add');
new_a.setAttribute('target', '_self');
var new_b = document.createElement("b");
var b_inner = document.createTextNode('+');
new_b.appendChild(b_inner);
$(this).after(new_a).after(new_input).after('<br>');
new_a.appendChild(new_b);
$('.add').click(t); ///////////////
});
});
Примечание:
Ну и ограничиваем количество прикрепляемых файлов (в моем примере - максимум 15):
$(document).ready(function(){
x=1; ///////// начальное значение счетчика 1 (т.к. уже существует одно поле для файла)
$('.add').click(t = function() {
if (x>14) break; ///////// выходим, если превышен лимит
var new_input = document.createElement("input");
new_input.setAttribute('type', 'file');
new_input.setAttribute('name', 'photo[]');
new_input.setAttribute('value', '');
var new_a = document.createElement("a");
new_a.setAttribute('href', '#');
new_a.setAttribute('class', 'add');
new_a.setAttribute('target', '_self');
var new_b = document.createElement("b");
var b_inner = document.createTextNode('+');
new_b.appendChild(b_inner);
$(this).after(new_a).after(new_input).after('<br>');
new_a.appendChild(new_b);
$('.add').click(t);
window.x++; /////// инкрементируем счетчик полей
});
});
Примечание:
По-моему довольно таки красиво. А насчет того, что в jQuery есть attr - знаю, конечно,... и пользовался миллион раз как .attr(key, value) так и setAttribute(key, value) - разница есть? :) Ну разве что написать setAttribute дольше, чем attr :)
Если я создаю элементы на native JS, то и атрибуты им задаю на native JS - не знаю почему :) наверное потому что native JS тоже забывать нельзя :) Хотя... jQuery умеет почти всё... а если и не умеет NATIVE JQUERY, то есть куча плагинов. В общем, за это, я думаю, меня строго судить не правильно :)