javascript - 无法将animatescroll插件 Hook 到绑定(bind)方法

对于js / jQuery来说还是很新的，但是我认为将代码与HTML标记分开是最好的做法？

我正在使用http://plugins.compzets.com/animatescroll/ animateScroll，很惊讶地看到
像这样附加到按钮的代码...

<div id="MainContent">

<ul id="Gallery" class="container gallery">

    <li><a href="images/full/001.jpg"><img src="images/thumb/001.jpg" alt="Image 001" class="destroy"/></a></li>
    <li><a href="images/full/002.jpg"><img src="images/thumb/002.jpg" alt="Image 002" class="destroy"/></a></li>
    <li><a href="images/full/003.jpg"><img src="images/thumb/003.jpg" alt="Image 003" class="destroy"/></a></li>
    <li><a href="images/full/004.jpg"><img src="images/thumb/004.jpg" alt="Image 004" class="destroy"/></a></li>
    <li><a href="images/full/005.jpg"><img src="images/thumb/005.jpg" alt="Image 005" class="destroy"/></a></li>
    <li><a href="images/full/006.jpg"><img src="images/thumb/006.jpg" alt="Image 006" class="destroy"/></a></li>
    <li><a href="images/full/007.jpg"><img src="images/thumb/007.jpg" alt="Image 007" class="destroy"/></a></li>
    <li><a href="images/full/008.jpg"><img src="images/thumb/008.jpg" alt="Image 008" class="destroy"/></a></li>
    <li><a href="images/full/009.jpg"><img src="images/thumb/009.jpg" alt="Image 009" class="destroy"/></a></li>
    <li><a href="images/full/010.jpg"><img src="images/thumb/010.jpg" alt="Image 010" class="destroy"/></a></li>
    <li><a href="images/full/011.jpg"><img src="images/thumb/011.jpg" alt="Image 011" class="destroy"/></a></li>
    <li><a href="images/full/012.jpg"><img src="images/thumb/012.jpg" alt="Image 012" class="destroy"/></a></li>
    <li><a href="images/full/013.jpg"><img src="images/thumb/013.jpg" alt="Image 013" class="destroy"/></a></li>
    <li><a href="images/full/014.jpg"><img src="images/thumb/014.jpg" alt="Image 014" class="destroy"/></a></li>
    <li><a href="images/full/015.jpg"><img src="images/thumb/015.jpg" alt="Image 015" class="destroy"/></a></li>
    <li><a href="images/full/016.jpg"><img src="images/thumb/016.jpg" alt="Image 016" class="destroy"/></a></li>
    <li><a href="images/full/017.jpg"><img src="images/thumb/017.jpg" alt="Image 017" class="destroy"/></a></li>
    <li><a href="images/full/018.jpg"><img src="images/thumb/018.jpg" alt="Image 018" class="destroy"/></a></li>
    <li><a href="images/full/001.jpg"><img src="images/thumb/001.jpg" alt="Image 001" class="destroy"/></a></li>
    <li><a href="images/full/002.jpg"><img src="images/thumb/002.jpg" alt="Image 002" class="destroy"/></a></li>
    <li><a href="images/full/003.jpg"><img src="images/thumb/003.jpg" alt="Image 003" class="destroy"/></a></li>
    <li><a href="images/full/004.jpg"><img src="images/thumb/004.jpg" alt="Image 004" class="destroy"/></a></li>
    <li><a href="images/full/005.jpg"><img src="images/thumb/005.jpg" alt="Image 005" class="destroy"/></a></li>
    <li><a href="images/full/006.jpg"><img src="images/thumb/006.jpg" alt="Image 006" class="destroy"/></a></li>
    <li><a href="images/full/007.jpg"><img src="images/thumb/007.jpg" alt="Image 007" class="destroy"/></a></li>
    <li><a href="images/full/008.jpg"><img src="images/thumb/008.jpg" alt="Image 008" class="destroy"/></a></li>
    <li><a href="images/full/009.jpg"><img src="images/thumb/009.jpg" alt="Image 009" class="destroy"/></a></li>
    <li><a href="images/full/010.jpg"><img src="images/thumb/010.jpg" alt="Image 010" class="destroy"/></a></li>
    <li><a href="images/full/011.jpg"><img src="images/thumb/011.jpg" alt="Image 011" class="destroy"/></a></li>
    <li><a href="images/full/012.jpg"><img src="images/thumb/012.jpg" alt="Image 012" class="destroy"/></a></li>
    <li><a href="images/full/013.jpg"><img src="images/thumb/013.jpg" alt="Image 013" class="destroy"/></a></li>
    <li><a href="images/full/014.jpg"><img src="images/thumb/014.jpg" alt="Image 014" class="destroy"/></a></li>
    <li><a href="images/full/015.jpg"><img src="images/thumb/015.jpg" alt="Image 015" class="destroy"/></a></li>
</ul>
<button class="top">click me</button>

更奇怪的是，我尝试使用它（这是我的问题的本质），但它不起作用！

jQuery的：

<script src="text/javascript">
$(function() {
    $('.top').bind('click', function (){
    $('#Gallery').animatescroll();
});
});

</script>
<script src="../lib/jquery-1.8.3.min.js"></script>
<script src="../lib/animatescroll.js"></script>

最佳答案

遵循Yury Tarabanko的指示（在评论中）
尝试使用此代码...以防动态生成“ .top”元素。

$(document).ready(function () {
    $('body').on('click', '.top', function () {
        $('#Gallery').animatescroll();
    });
});

始终将依赖文件放在任何脚本之前：

<script src="../lib/jquery-1.8.3.min.js"></script>
<script src="../lib/animatescroll.js"></script>

<script src="text/javascript">
    $(document).ready(function () {
        $('.top').on('click', function (){
            $('#Gallery').animatescroll();
        });
    });

</script>

其余代码（animatePlugin :)与此处无关。

关于javascript - 无法将animatescroll插件 Hook 到绑定(bind)方法，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19521009/