jQuery простая загрузка и выгрузка контента в DIV

0

Я знаю, что этот вопрос задан раньше, но я не могу получить ответ, который мне нужен, поэтому я попытаюсь его упростить:

Когда я нажимаю на.LINK, я хочу, чтобы содержимое #GRID было заполнено другими div, поэтому я использую *:

$(".LINK").click(function(){
    $( "#GRID" ).load('my_linked_file.html .other_divs');
});

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

$(".LINK2").click(function(){
    $( "#GRID" ).load('my_original_file.html .my_original_divs');
});

Я был бы рад загрузить jsfiddle, но.load работает только на сервере. Я могу загрузить jsfiddle для иллюстрации (макета), если это помогает?

(* Я видел много людей, предлагающих метод скрыть и показать, но у меня много ссылок с большим количеством контента, и я предполагаю, что это очень замедлит мою страницу)

Есть предположения?

Теги:
jquery-load

3 ответа

0
Лучший ответ

Что-то вроде этого сработало для меня:

<a href="my_linked_file.html" class="LINK">Click Me</a>
<a href="my_original_file.html" class="LINK2">Click Me 2</a>
<div id="GRID"></div>

<script type="text/javascript">
$('.LINK').on('click', function (event) {
    event.preventDefault();

    $('#GRID').load($(this).attr('href') + ' .other_divs');
});
$('.LINK2').on('click', function (event) {
    event.preventDefault();

    $('#GRID').load($(this).attr('href') + ' .original_divs');
});
</script>
Поделиться
  • 0
    Это работает отлично, пока я не попытаюсь добавить его к ссылке, которая находится внутри DIV. Например: <div id = "GRID"> <div class = "thumbs" id = "two"> <a href="project_sample.html"> ЭТА ССЫЛКА INSTEAD </a> </ div> Поэтому, когда ссылка Связанный с функцией вне GRID div отлично, но если это дочерний элемент, он не будет работать. Вы знаете, как это исправить? огромное спасибо
  • 0
    эта ссылка на «project_sample.html» будет из класса LINK или LINK2? Если вы намеревались добавить это в свой комментарий, он все еще работает для меня: <div id = "GRID"> <div class = "thumbs" id = "two"> <a href = "project_sample.html" class = "LINK "> У ЭТОЙ ССЫЛКИ - КЛАСС </a> </ div> </ div>. Я добавил это к оригинальному документу, и он дал желаемые результаты. Затем я добавил его к содержимому, которое загружается с помощью функций jQuery с главной страницы, и ссылка все еще предназначалась для div # GRID, как и должно быть.
Показать ещё 1 комментарий
0

Я исправил это, изменив последнюю функцию на:

$('.LINK2').delegate("a", "click", function(e){
    e.preventDefault();

 $('#Grid').load($(this).attr('href') + ' .thumbs');

});
Поделиться
0

Может ли это помочь?;

$( "#GRID" ).html('').load('my_original_file.html .my_original_divs');
Поделиться
  • 0
    Я не знаю, потому ли это, что кнопка .LINK2 имеет дополнительную функцию переключения, но она не будет работать :(
  • 0
    попытаться предотвратить дефолт () и stopPropagation () при нажатии .LINK2 и посмотреть, если это ...

Ещё вопросы

Сообщество Overcoder
Наверх
Меню