I have a js object that has a parameter that defines the layout in HTML. While constructing the page I use jQuery to modify that layout parameter before drawing it on screen. For some reason when I try to use jQuery selectors against the object it is not finding anything.
Here I have used the browser console to show the object parameter:
$(Students_OE_Programs.layout)
(3) [div.test, text, div#student_programs_pb1_holder.pickboxHolder]
0:div.test
1:text
2:div#student_programs_pb1_holder.pickboxHolder
length:3
__proto__:Array(0)
Now I use jQuery to select all divs from this object. As you can see above there should be 2, but I get none:
$('div',Students_OE_Programs.layout)
r.fn.init [prevObject: r.fn.init(3)]
I have also tried:
$(Students_OE_Programs.layout).children('div')
r.fn.init [prevObject: r.fn.init(3)]
The most puzzling this about this is that I have done the exact same thing in other parts of the same page and it works just fine. Any help would be appreciated. I apologize if this question has been asked, I have found it difficult to search for.
Updated to include sample below. As you can see the layout contains the two divs, but the jQuery.append is not finding anything to match so it isn't appending any of the spans.
var Students_OE_Programs = {
layout: null
}
$(document).ready(function() {
var l = '<div class="test">Programs</div>\
<div id="OEPrograms_holder" class="pickboxHolder"></div>';
Students_OE_Programs.layout = $.parseHTML(l);
console.log(Students_OE_Programs.layout);
$('div',Students_OE_Programs.layout).append('<span>test</span>');
$('body').append(Students_OE_Programs.layout);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
</body>
</html>