Question

In my website I have a file called learn-more.html , it’s used to load stuff from index.html using AJAX.

learn-more.html

<div id="something" class="hero-unit span-one-third" style="position: relative;">
    Foo Bar
</div>

<div id="main-images" class="hero-unit span-one-third" style="position: relative;">
    <div id="learn-more-photo" class="span-one-third">
        <img class="thumbnail" src="http://placehold.it/300x180" alt="">
    </div>
</div>

I have the following script located in index.html

<script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $("#learn-more-button").click(function() {
                $.get('ajax/learn-more.html #main-images', function (data) {
                        alert(data);
                });
</script>

Problem:
The alert prints the contents of: learn-more.html

<div id="something" class="hero-unit span-one-third" style="position: relative;">
Foo Bar
</div>

<div id="main-images" class="hero-unit span-one-third" style="position: relative;">
    <div id="learn-more-photo" class="span-one-third">
        <img class="thumbnail" src="http://placehold.it/300x180" alt="">
    </div>
</div>

Expected
The alert should print the content of: <div id="main-images">

<div id="learn-more-photo" class="span-one-third">
    <img class="thumbnail" src="http://placehold.it/300x180" alt="">
</div>

What could be going on here ?

EDIT: I’m willing to upload a .zip with the real files… it’s just index.html plust learn-more.html and the css, if anyone is interested let me know.

EDIT2: This prints out the whole learn-more.html content

$.get('ajax/learn-more.html #main-images', function (data) {            
    alert(data);
});

Answer 1

I solved my issue,

$(data) returns an array of elements and not a jQuery object. $(data)[x] contains the element I was looking for.

To retrieve it, I ended up using

$(data).filter('#main-images');

Thanks everyone for your help!