.mouseenter () не работает с контентом, загруженным с помощью функции jQuerys .load () - PullRequest
Новая
       21

.mouseenter () не работает с контентом, загруженным с помощью функции jQuerys .load ()

0 голосов
/ 09 октября 2010

У меня есть страница с панелью навигации, которая загружает контент с другой страницы в div-контент при нажатии на элемент навигации.

Содержимое с другой страницы содержит различные элементы div. Один из этих элементов имеет стиль 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);
    });

Элемент div #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?

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

1 Ответ

4 голосов
/ 09 октября 2010

В вашем случае используйте .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);
});
...