2010-10-09 1 views
0

У меня есть страница с навигационной панелью, которая загружает контент с другой страницы в 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?

Заранее спасибо

ответ

4

В вашем случае использования .delegate() для элементов динамически добавляемых в #workcontent, как это:

$("#workcontent").delegate('.workitem', 'mouseenter', function() { 
    $(".webImgOverlay").fadeIn(200); 
}).delegate('.workitem', 'mouseleave', function() { 
    $(".webImgOverlay").fadeOut(200); 
}); 

В других случаях, более общие .live() работ:

$(".workitem").live('mouseenter', function() { 
    $(".webImgOverlay").fadeIn(200); 
}).live('mouseleave', function() { 
    $(".webImgOverlay").fadeOut(200); 
}); 
+0

Красивая , большое спасибо! – MadsMadsDk

+0

@Mads - welcome :) –

+0

@Mads, просто для уточнения * почему *: события были привязаны к * существующим * элементам внутри dom. Любые элементы, добавленные позже, не будут связаны с событиями, если они явно не добавлены позже. С делегатом делегат события * захватывает событие и ищет любые дочерние элементы, которые соответствуют селектору при запуске события. 'live' - это, по сути, то же самое с документом, что и делегат. – zzzzBov

 Смежные вопросы

  • Нет связанных вопросов^_^