JQuery загружает неправильный html через ajax?

Question

На моем сайте у меня есть файл с именем learn-more.html, он используется для загрузки материала из index.html с использованием AJAX.

узнать-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> 

У меня есть следующий сценарий находится в 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> 

Проблема: В бдительные печатает содержимое: 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> 

Ожидаемое Оповещение должно напечатать содержание: <div id="main-images">

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

Что может быть здесь происходит?

EDIT: Я хочу загрузить .zip с реальными файлами ... это просто index.html plust learn-more.html и css, если кто-нибудь заинтересован, дайте мне знать.

EDIT2: Это выводит весь Learn-more.html содержание

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

Answer 1

я решил мою проблему,

$ (data) возвращает массив элементов, а не объект jQuery. $ (data) [x] содержит элемент, который я искал.

Чтобы получить его, я закончил с использованием

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

Спасибо всем за вашу помощь!

Answer 2

Я думаю, это то, что вы ищете:

$.get('ajax/learn-more.html', function (data) { 
    var foo = $("#main-images", data); 

    alert(foo.html()); 
}); 

EDIT

Хмм , попробуйте эти предупреждения, чтобы узнать, закрыты ли мы:

$.get('ajax/learn-more.html', function (data) { 
    var foo = $("#main-images", data); 

    alert(foo.length); 
    alert(foo.hasClass('hero-unit span-one-third')); 
    alert(foo.html()); 
}); 

EDIT

Может попробовать обертывание переменных данных в функции JQuery?

$.get('ajax/learn-more.html', function (data) { 
    data = $(data); 

    var foo = $("#main-images", data); 

    alert(foo.length); 
    alert(foo.hasClass('hero-unit span-one-third')); 
    alert(foo.html()); 
}); 

Answer 3

Вместо того, чтобы использовать $.get(), чтобы сделать это, попробуйте метод load вместо:

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

Answer 4

попытка отметить ответ datatype

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

Answer 5

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