jQuery .find() on data from .ajax() call is returning "[object Object]" instead of div
To answer your question specifically, it seems to be working correctly. You said that it returns [object Object]
, which is what jQuery will return with the find("#result")
method. It returns a jQuery element that matches the find
query.
Try getting an attribute of that object, like result.attr("id")
- it should return result
.
In general, this answer depends on whether or not #result
is the top level element.
If #result
is the top level element,
<!-- #result as top level element --><div id="result"> <span>Text</span></div><div id="other-top-level-element"></div>
find()
will not work. Instead, use filter()
:
var $result = $(response).filter('#result');
If #result
is not the top level element,
<!-- #result not as top level element --><div> <div id="result"> <span>Text</span> </div></div>
find()
will work:
var $result = $(response).find('#result');
I just spent 3 hours to solve a similar problem. This is what worked for me.
The element that I was attempting to retrieve from my $.get
response was a first child element of the body tag. For some reason when I wrapped a div around this element, it became retrievable through $(response).find('#nameofelement')
.
No idea why but yeah, retrievable element cannot be first child of body... that might be helpful to someone :)