jQuery：滚动动态生成的列表项

Question

我正在尝试将 Valums 的滚动脚本（http://valums.com/scroll-menu-jquery/）合并到 Cycle 插件的动态创建分页中，http://www.malsup.com/jquery/cycle/pager2.html。基本上我试图让动态分页（1、2、3...）在鼠标移动时滚动。

所以，我有原始的 Cycle 演示代码：

$('#slideshow').before('').cycle({ fx: '调低', 速度：'快'， 超时：0， 寻呼机：'#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>'; 
} 

});

然后我尝试应用：

$(function(){ //获取我们的元素以便更快地访问并设置覆盖宽度 var div = $('div#nav'), ul = $('ul#nav'), // 无序列表的左边距 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);
});

});

问题是：

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

找不到最后一个元素，因为所有元素都是动态创建的。有什么想法可以限制脚本，以便 #nav 中的元素可以在 mousemove 上滚动吗？

Answer 1

我没有尝试你的代码，但无论如何 jQuery 都应该找到你动态创建的元素。

<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>

尝试动态地重新创建此列表。

聚苯乙烯
您的图像中缺少“alt”属性。

Answer 2

好吧，所以我必须使用 .live() ，如下所示：

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);
    });