jQuery div擴展高度不起作用

Question

我的jQuery有一點問題。 我希望它擴大div元素的高度，但似乎無法舔它。 我正在使用以下腳本：

<script>
$('.button').click(function(){
$('#footer_container').animate({height:'150px'}, 500);
});
</script>

其中“ .button”是觸發動畫的超鏈接的類：

“ #footer_container”是div，應從75px擴展到150px。

我正在使用

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

在我的文檔中 是錯誤的附件嗎（我正在頁面上運行的其他幾個腳本中使用它）？ 我缺少什么？ 我已經在測試網站上發布了原型 。 它是藍色底部底部的矩形按鈕，顯示為：單擊以查看我們的會員資格。 它應該擴展div以顯示更多內容，但不執行任何操作:-(

有人有想法么？ 非常感謝！！

Answer 1

該代碼應該在dom准備就緒的處理程序中，因為執行腳本時，元素.button尚未添加到dom中，因此選擇器不會返回任何結果，因此事件處理程序將不會附加到.button元素上。

jQuery(function(){
    $('.button').click(function(e){
        e.preventDefault();
        $('#footer_container').animate({height:'150px'}, 500);
    });
})

Answer 2

罪魁禍首是您要在元素出現在DOM中之前注冊處理程序。 因此，最終您的.button不會附加到單擊處理程序，因為在腳本執行時該元素尚不存在。

<div id="memberships">
<script>
$('.button').click(function(){
    $('#footer_container').animate({height:'150px'}, 500);
});
</script>
<a href="#" class="button">Click to see our memberships.</a>
</div>

始終將其附加在Document ready處理程序中是一個安全的選擇。 即$(function(){...}); 並將其放置在頁面上的任何位置或外部js文件中。 因為僅當存在文檔的文檔就緒且元素可用時才加載它。

所以你會做：

$(function(){
     $('.button').click(function(e){
        e.preventDefault(); //just prevent the default behavior of the hyperlink
        $('#footer_container').animate({height:'150px'}, 500);
    });

});

將html與腳本混合使用通常也是一種不好的做法。 它很難維護，並且可能顯示出不可預測的行為。