Я знаю, что этот вопрос задан раньше, но я не могу получить ответ, который мне нужен, поэтому я попытаюсь его упростить:
Когда я нажимаю на.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 для иллюстрации (макета), если это помогает?
(* Я видел много людей, предлагающих метод скрыть и показать, но у меня много ссылок с большим количеством контента, и я предполагаю, что это очень замедлит мою страницу)
Есть предположения?
Что-то вроде этого сработало для меня:
<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>
Я исправил это, изменив последнюю функцию на:
$('.LINK2').delegate("a", "click", function(e){
e.preventDefault();
$('#Grid').load($(this).attr('href') + ' .thumbs');
});
Может ли это помочь?;
$( "#GRID" ).html('').load('my_original_file.html .my_original_divs');