Question

Ok, I am dynamically creating hidden input fields as follows:

$("<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");

In order to facilitate debugging, I changed the id of the title input to in clude its class (which is title). So it seems as if I should be able to access it with the code $('#pid'+id+'-title'). This, however, is not the case. Rather, the result of using $("#pid"+id+"-title")toSource() is ({context:({}), selector:"#pid0-title"}). 0, by the way, is the correct ID.

I feel I must be missing something obvious about JQuery and dynamic elements. What are the reasons that I apparently cannot find my object?

Answer 1

You can try in this way is more clear and orderly:

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