CODEWITHSUNDEEP
jquerydom
MirroredFate
MirroredFate

Reputation: 12816

Obtaining dynamically created element

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?

Upvotes: 0

Views: 397

Answers (3)

andres descalzo
andres descalzo

Reputation: 14967

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

Upvotes: 2

Zuul
Zuul

Reputation: 16269

Your inputs are not getting the value for the ID attribute due to a misplaced 'single quote' on all of them.

See this working Fiddle Example!

Adapt your code to this:

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

The selection of the element should go without any problems now.

Note: As mentioned by @Jeff Watkins, you shouldn't have duplicated IDs on the document.

The input.category and the input.author have the same ID.

See the relevant documentation, where it reads:

...an ID attribute can be used to uniquely identify its element.

Upvotes: 1

Jeff Watkins
Jeff Watkins

Reputation: 6359

You have quotes in your ids, also you have duplicate ids, neither of which are valid. Please just use a unique ID with acceptable characters (starts with alpha, can include numeric and underscore and possibly a few others which I forget)

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

The above works in jQuery and I can select by ID and get the value as shown, the apostrophes in your ids were killing the code.

Upvotes: 1

Related Questions