jQuery not selecting .appended controls/elements

Question

Maybe it's my selector syntax, I dunno. When I add everything into a single statment, everything's added, but they can't be selected with the jQuery selector.

If I split it up, the second append fails, but the first succeeds.

$.each($.parseJSON(msg.d) , function(i){
    $("#contactsGrid").append("<tr id='contactRow." + $.parseJSON(msg.d)[i].SupplierContID + "'></tr>");
    $("#contactRow." + $.parseJSON(msg.d)[i].SupplierContID).append("<td><input type='text' id='contactLastName." + $.parseJSON(msg.d)[i].SupplierContID + "' /></td>");
});

Need to be able to select dynamic controls.

Thanks in advance!

Answer 1

Your ID has a special character . that needs to be escaped.

$("#contactRow\\." +...

However it's probably better to do it in 1 line anyway.

Answer 2

The period is a special character in a selector, you need to escape it:

$("#contactRow\\." + $.parseJSON(msg.d)[i].SupplierContID)

Answer 3

Something I just used on another project I was building. I quickly changed the id names / elements, hope this gives you a good idea of where to go:

$.each($.parseJSON(msg.d) , function(i){
     $("#contactsGrid").append(
            $(document.createElement('tr')).attr({
                'id' : "contactRow\\." + $.parseJSON(msg.d)[i].SupplierContID +
            }).append(
                $(document.createElement('td')).append({
                    $(document.createElement('input')).attr({
                       'type' : 'text',
                       'id' :  "contactLastName\\." + $.parseJSON(msg.d)[i].SupplierContID
                    })
                })
            )
         )
     )
});