У меня есть страница с навигационной панелью, которая загружает контент с другой страницы в content-div, когда нажимается элемент навигации..mouseenter() не работает с контентом, загруженным функцией jQuerys .load().
Содержимое с другой страницы содержит множество различных разделов. Один из этих разделов имеет стиль display: none
. Этот div находится поверх другого div. Когда я .mouseenter() в div, который находится ниже скрытого div, мне нужен скрытый div для .fadeIn().
.load() JQuery следующим образом:
var workitem;
// When the navigationitem is clicked
$("ul.worklist li", this).click(function() {
// Get the id-attribute, to decide what div to load
workitem = $(this).attr("id");
// Declare a variable that describes the contents location
var getitem = "work.aspx #" + workitem;
// Load the content with the .load function, and add some cool fadeIn effects
$("#workcontent").load(getitem, function() {
$(".webImg:hidden").delay(1000).fadeIn(200, function() {
$(".logoImg:hidden").fadeIn(200, function() {
$(".printImg:hidden").fadeIn(200, function() {
$(".projBeskrivelse:hidden").fadeIn(800);
});
});
});
});
// Do stuff to the navigation panel
$(this).stop().animate({ color: '#000' }, 100);
$(this).siblings("li").animate({ 'line-height': '24px', color: '#ddd' }, 300);
});
ДИВ #workitem содержит следующие элементы
<div class="webImg">
<div class="webImgOverlay"><p>Go to website ►</p></div> <!-- This is the element that has the display: hidden attribute in it's class -->
<img src="work/xxxxx_web_550_451.jpg" alt="" />
</div>
<div class="logoImg">
<img src="work/let_logo_199_325.jpg" alt="" />
</div>
<div class="printImg">
<img src="work/xxxxx_print_199_101.jpg" alt="" />
</div>
<div class="projBeskrivelse">
<p class='header'>xxxxx</p>
<p class='brodtekst'>This project is developed for the danish waiter rental company, xxxxx. The assigment included a redesign of their logo, their website and a general makeover of the visual identity. The project was made because xxxxx was expanding with a catering subdivision.</p>
</div>
</div>
Теперь, когда я .mouseenter() на DIV .webImg, я хочу следующее:
$(".workitem", this).mouseenter(function() {
$(".webImgOverlay").fadeIn(200);
});
$(".workitem", this).mouseleave(function() {
$(".webImgOverlay").fadeOut(200);
});
Но это не работает. Это потому, что содержимое загружается с помощью ajax? Есть ли способ сделать это с помощью jQuery?
Заранее спасибо
Красивая , большое спасибо! – MadsMadsDk
@Mads - welcome :) –
@Mads, просто для уточнения * почему *: события были привязаны к * существующим * элементам внутри dom. Любые элементы, добавленные позже, не будут связаны с событиями, если они явно не добавлены позже. С делегатом делегат события * захватывает событие и ищет любые дочерние элементы, которые соответствуют селектору при запуске события. 'live' - это, по сути, то же самое с документом, что и делегат. – zzzzBov