JQuery. html () question
У меня есть меню, созданное с помощью HTML, используя простой UL с большим количеством LI. Каждый элемент содержит ссылку с классом «первичный». При щелчке по элементу списка (где угодно в элементе списка, а не только по тексту) jquery проверяет, содержит ли элемент ссылку с классом «primary», и если да, то загружает указанную страницу в скрытый div (который я называются временными, хотя на самом деле это не временное явление ...), а затем извлекает определенные части новой страницы для установки в качестве html для частей видимой страницы. Например, он берет ".temp .content" и помещает его в ".content". Он в основном извлекает html, устанавливает для html ".temp" значение "ничто" (в противном случае строка $ (". Content"). Html (newhtml); установит html ".content" во временном div), а затем устанавливает html исходного содержимого div на newhtml.
Однако у меня есть небольшая проблема. Кажется, что иногда он делает div пустым, иногда для загрузки страницы требуется два щелчка мышки, а иногда я могу щелкнуть элемент 1, затем щелкнуть элемент 2, и он мгновенно загружает контент из элемента 1 (т.е. div страницы, загруженной элементом 1).
На самом деле я могу создать «цепочку» - щелкнуть элементы 1, 2, 3, 4, а затем снова 1 и 2, и я вижу пустое содержимое для элементов 1, 2, 3, 4 и 1.
Кто-нибудь знает, что здесь происходит?
Заранее большое спасибо.
С уважением,
Ричард
В ответ Питеру Айтаи (я попытался сократить его как можно больше - на самом деле это намного сложнее, чем это, поскольку у меня есть макет из трех столбцов и исправление, чтобы все три столбца были закрашены в такой же высоты, но я думаю, что все самое важное здесь) ...
Базовая структура страницы:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
//jquery includes
$("li").click(function () {
var url = $(this).find("a.primary").attr("href");
if (url != "" && url != null) {
$(".temp").load(url);
var newhtml = $(".temp .content").html();
$(".temp").html("");
$(".main-col").html(newhtml);
}
});
</head>
<body>
<div class="wrapper">
<div class="leftmenu">//left menu stuff here, in the following format:
<ul>
<li class="header">Content Management List</li>
<li><a class="primary" href="/Administration/List.aspx?subitem=range">Ranges</a></li>
<li><a class="primary" href="/Administration/List.aspx?subitem=collection">Collections</a></li>
</ul>
</div>
<div class="content"></div>
<div class="temp"></div>
</wrapper>
</body>
</html>