ПОЛУЧЕНИЕ динамически созданный элемент

Question

Ok, я динамически создавать скрытые поля ввода следующим образом:

$("<input type='hidden' id=pid'"+postid+"-title name='posts["+postid+"][title]' value='' />" + 
    "<input type='hidden' id=pid'"+postid+"-body name='posts["+postid+"][body]' value='' />" + 
"<input type='hidden' id=pid'"+postid+"' class='category' name='posts["+postid+"][category]' value='' />" + 
"<input type='hidden' id=pid'"+postid+"' class='author' name='posts["+postid+"][author]' value='' />" 
).appendTo("#datatable"); 

Для того, чтобы облегчить отладку, я изменил идентификатор ввода заголовка в лать вывод о его классе (что название) , Поэтому мне кажется, что я должен иметь доступ к нему с кодом $('#pid'+id+'-title'). Это, однако, не так. Скорее, результатом использования $("#pid"+id+"-title")toSource() является ({context:({}), selector:"#pid0-title"}). 0, кстати, является правильным ID.

Я чувствую, что мне не хватает чего-то очевидного о JQuery и динамических элементах. Каковы причины, по которым я, по-видимому, не могу найти свой объект?

Answer 1

Вы можете попробовать таким образом, является более четким и аккуратным:

var createInputs = function(postid) { 

    var 
     input = $('<input type="hidden" value="" />'), 
     createInput = function(id, type) { 
      return input.clone() 
        .addClass(type) 
        .attr('id', 'pid' + id + '-' + type) 
        .attr('name', 'posts[' + id + '][' + type + ']'); 
     }; 

    $() 
     .add(createInput(postid, 'title')) 
     .add(createInput(postid, 'body')) 
     .add(createInput(postid, 'category')) 
     .add(createInput(postid, 'autor')) 
     .appendTo('#datatable'); 

};  

createInputs(1); 

console.log($('#datatable').html()); 

example

Answer 2

У вас есть цитаты в ваших идентификаторах, также у вас есть дубликаты идентификаторов, ни один из которых не действителен. Пожалуйста, просто использовать уникальный идентификатор с приемлемыми символами (начинается с альфа, может включать в себя цифровой и подчеркивания и, возможно, некоторые другие, которые я забываю)

$("<input type='hidden' id='pid"+postid+"-title' name='posts["+postid+"][title]' value='' />" + 
    "<input type='hidden' id='pid"+postid+"-body' name='posts["+postid+"][body]' value='cccc' />" + 
"<input type='hidden' id='pid"+postid+"-category' class='category' name='posts["+postid+"][category]' value='' />" + 
"<input type='hidden' id='pid"+postid+"-author' class='author' name='posts["+postid+"][author]' value='' />").appendTo("#datatable"); 


alert($("#pid1-body").val()); 

Вышеуказанные работы в JQuery, и я могу выбрать с помощью ID и получить значение как показано, апострофы в ваших Идах убивали код.

Answer 3

Ваши входы не получают значение для атрибута ID из-за неуместной «одиночной кавычки» на всех из них.

См. Это working Fiddle Пример!

Адаптировать свой код следующим образом:

$("<input type='hidden' id='pid"+postid+"-title' name='posts["+postid+"][title]' value='' />" + 
"<input type='hidden' id='pid"+postid+"-body' name='posts["+postid+"][body]' value='' />" + 
"<input type='hidden' id='pid"+postid+"' class='category' name='posts["+postid+"][category]' value='' />" + 
"<input type='hidden' id='pid"+postid+"' class='author' name='posts["+postid+"][author]' value='' />" 
).appendTo("#datatable"); 

Отбор элемента должен идти без каких-либо проблем в настоящее время.

---

Примечание: Как упомянуто @Jeff Watkins, вы не должны дублироваться ID с на document.

input.category и input.author имеют одинаковые ID.

Обратитесь к соответствующему documentation, в котором говорится:

... атрибут ID может использоваться для уникальной идентификации элемента.