2013-04-08 2 views
-1

У меня есть два HTML-страницы, index.html и photo.htmlИспользование метода .load() останавливает использование других jquery-методов?

index.html

<html> 
<body> 
    <div id="menu"> 
    <ul> 
    <li><p id="about">ABOUT</p></li> 
    <li><p id="work">WORK</p></li> 
    <li><p id="photo">PHOTO</p></li> 
    <li><p id="mail">MAIL ME</p></li> 
    </ul> 
    </div> 
    <div id="photo-container"> 
    </div> 
</body> 
</html> 

и photo.html

<html> 
<html> 
<body> 
    <div class="about12"> 
    <h4>a-design</h4> 
    <p> 
    //some text  
    </p> 
    </div> 
</body> 
</html> 

и Javascript Файл:

$(document).ready(function(){ 

    $('#photo').click(function() { 
     $("#container").load("photo.html .about12"); 
     $('#photo-container h4').fadeout(5000); 
      $('#photo-container p').animate({top: '150px'},1500); 
    }); 
}); 

Когда я нажимаю на идентификатор фотографии, функция .load() делает это, но потом, никакие другие функции jquery не будут работать. Почему это?

Кроме того, другой вопрос: .load() - лучший способ для выполнения этой работы: загрузка, затухание и анимация, или есть лучший метод?

+0

Пожалуйста, включите JavaScript все библиотеки, которые вы используете. Вы используете только jQuery? Или jQuery ui тоже? Это облегчит людям возможность определить, где проблема. – drozzy

+0

Я использую jQuery и jQuery ui, но проблема была решена. Но спасибо в любом случае –

ответ

1

AJAX означает асинхронную загрузку. Эта часть:

$('#photo-container h4').fadeout(5000); 
$('#photo-container p').animate({top: '150px'},1500); 

Пожары еще до загрузки фото-контейнера. Вы должны передать его в качестве обратного вызова

$('#photo').click(function() { 
    $("#container").load("photo.html .about12", function() { 
     $('#photo-container h4').fadeout(5000); 
     $('#photo-container p').animate({top: '150px'},1500); 
    }); 
}); 
+0

спасибо, что это очень полезно ... –

0

Использование jQuery .live - это, вероятно, то, что вы ищете.

$("#photo").live("click", function(){ ... }); 
+0

Живая функция устарела. – ZippyV

+0

Я догадываюсь, что я не коснулся jQuery через некоторое время – drunkenRabbit

0

ajax load is asynchronus .. вам нужно сделать материал для данных о его функции обратного вызова. использовать find() для получения динамического добавленного элемента содержимого. и вам просто нужно передать URL в первом варианте нагрузки

попробовать это

$('#photo').click(function() { 
    $("#container").load("photo.html",function(data){ 
     $(data).find('#photo-container h4').fadeout(5000); 
     $(data).find('#photo-container p').animate({top: '150px'},1500); 
    }); 

}); 
Смежные вопросы