Question: I'm loading some HTML with jQuery asynchronously:

```
$.get(path, {}, function (data) {
    var result = $(data);
    var resultSelector = result.find(selector);
});

```

`result` is a valid HTML *that contains* my selector (in my specific case, `"#UsersAndRolesResults"`).

I can see that it contains when I simply type `result` into the console, it's *there* exactly with the same ID, no typos or anything.

However, `result.find(selector)` returns 0 elements. 

In my specific example, this is `result`:

[![enter image description here](https://i.stack.imgur.com/f06Qd.png)](https://i.stack.imgur.com/f06Qd.png)

And: 

[![enter image description here](https://i.stack.imgur.com/rs98Q.png)](https://i.stack.imgur.com/rs98Q.png)

Why?

**UPDATE**: I can query for *other elements that are inside `#UsersAndRolesResults` with their ID tag and they are returned correctly*. I also *cannot* query any other top-level elements in the result. I think there is an issue with querying top-level elements inside the result.

**UPDATE 2:** Just try `$('<div id="target"></div>').find("#target")` and you will get 0 results, where you should obviously get the `div`.

Answer: 
It seems to be a design decision with jQuery. Top-level elements in an AJAX result are not queried correctly with `find`. Interesting.

I've solved my problem with a workaround by creating a dummy `div` element, encapsulating my result inside that element, and then querying that dummy element. It worked:

```
var t = $("<div>")
t.append(result);
t.find("#UsersAndRolesResults"); //this one returned my object correctly

```

For a simple example, try:

`$('<div id="target"></div>').find("#target");`

You will get 0 results.

Try:

`$('<div><div id="target"></div></div>').find("#target")`

And you'll get the correct result.
Try this:

```
$.get(path, {}, function (data) {
    var result = $($.parseHTML(data));
    var resultSelector = result.find(selector);
});

```