jQuery: Dynamisch generierte Listenelemente scrollen

Question

Ich versuche Valums Scroll-Skript (http://valums.com/scroll-menu-jquery/) zu einer dynamisch erstellten Seitennummerierung des Cycle-Plugins http://www.malsup.com/jquery/cycle/pager2.html zu integrieren. Im Grunde versuche ich, die dynamische Paginierung (1, 2, 3 ...) zu erhalten, um auf Mauszeiger zu scrollen.

Also, ich habe den ursprünglichen Zyklus Demo-Code:

$ ('# Diashow') vor ('') Zyklus ({ fx:. 'Aufdeck', Geschwindigkeit: 'schnell', timeout: 0, Pager: '#nav',

// callback fn that creates a thumbnail to use as pager anchor 
pagerAnchorBuilder: function(idx, slide) { 
    return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>'; 
} 

});

Und dann versuche ich gelten:

$ (function() {// Lernen Sie unsere Elemente für einen schnelleren Zugriff und stellen Overlay Breite var div = $ ('div # nav'), ul = $ ('ul # nav'), // ungeordnete Liste der linke Rand ulPadding = 15;

//Get menu width 
var divWidth = div.width(); 

//Remove scrollbars 
div.css({overflow: 'hidden'}); 

//Find last image container 
var lastLi = ul.find('li:last-child'); 

//When user move mouse over menu 
div.mousemove(function(e){ 

    //As images are loaded ul width increases, 
    //so we recalculate it each time 
    var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding; 

    var left = (e.pageX - div.offset().left) * (ulWidth-divWidth)/divWidth; 
    div.scrollLeft(left); 
}); 

});

Das Problem ist, dass:

var lastLi = ul.find ('li: last-child');

kann das letzte Element nicht finden, da alle Elemente dynamisch erstellt werden. Irgendwelche Ideen, wie die Skripte begrenzt werden könnten, so dass die Elemente innerhalb von #nav auf Mauszeiger scrollbar sind?

Answer 1

Ich habe Ihren Code nicht ausprobiert, aber jQuery sollte Ihre dynamisch erstellten Elemente egal was finden.

<div> 
    <span>one</span> 
    <span>two</span> 
    <span>three</span> 
    <span>four</span> 
    </div> 

<script> 
    $("div span:last-child") 
     .css({color:"red", fontSize:"80%"}) 
     .hover(function() { 
       $(this).addClass("someclass"); 
      }, function() { 
       $(this).removeClass("someclass"); 
      }); 

</script> 

Versuchen Sie, diese Liste dynamisch neu zu erstellen.

P.S. Ihnen fehlt das Attribut 'alt' in Ihren Bildern.

Answer 2

Ok, also musste ich .live() verwenden, wie unten dargestellt:

div.live('mousemove', function(e) { 
     var lastLi = ul.find('li:last-child'); 
     var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding; 
     var left = (e.pageX - div.offset().left) * (ulWidth-divWidth)/divWidth; 
     div.scrollLeft(left); 
    });