функция JQuery порывает с .load

Question

Я могу успешно загружать содержимое из страницы под названием test.html на странице под названием page.htm с:

$(document).ready(function(){ 
    $("#reveal").load("test.html"); 
}); 

Я поставил пустой DIV в page.htm называется #reveal и загрузка содержимого - никаких проблем.

В test.html У меня есть два класса divs, обозначаемые заголовками статей и содержимым статьи с классами: .artTitle и .artContent. В css-файле page.html у меня есть отображение: hidden .artContent - так что все, что отображается, это .artTitles. Затем я хочу показать .artContents с помощью переключателя.

Я могу заставить этот процесс jQuery работать inline (на той же странице), но ломается при загрузке html. В чем проблема при загрузке, которую мне не хватает - (очень зеленый новичок)?

Answer 1

Это функция переключения, которая, вероятно, является виновником, а не функцией нагрузки. Скорее всего, вы привязываетесь к элементу, который не существует до загрузки содержимого. Вам нужно использовать синтаксис делегата on(), чтобы связать прослушиватель с #reveal или другим предком.

Answer 2

Вы должны использовать живое событие, как следующее:

$('body').on('click', '.artTitles', function() { // binding live click to upcoming elements 
    var self = this; // keeping reference to clicked title, because this will not catch into the hide callback function due to different scope 
    $('.artContents:visible').hide(// hiding visible contents 
    function() { // callback function 
     $(self).closest('.artContents').show(300); // show content corresponding to title 
    }); 
}); 

Answer 3

Хорошо, я не эксперт с JQuery. На самом деле я пришел сюда, надеясь на окончательный ответ по существу на тот же вопрос. Ответы уже даны помогли мне точку в правильном направлении ... Вот было мое решение ...

Я предполагаю, что у вас есть функция JQuery, которая выглядит вдоль линий,

$('.trigger').click(function() { $('.artContents').toggle(); }); 

HTML, загружаемый через .load(), содержит щелчок .trigger, который будет переключаться .artContents, да? Попробуйте,

$(document).on('click','.trigger', function() { $('.artContents').toggle(); }); 

Я действительно надеюсь, что это поможет. Я прямо здесь с вами в лагере «очень зеленый новичок», но это сработало для меня. Я не мог точно объяснить, почему это работает. Возможно, кто-то другой может это сделать.