在AJAX加載後，JQuery UI animate（）不起作用（）

我有一個按鈕在使用JQuery UI的animate（）懸停和懸停時改變顏色。點擊時，該按鈕會通過AJAX加載頁面。事情是，一旦我點擊那個按鈕，animate（）似乎不工作，它只是凍結在一種顏色。在AJAX加載後，JQuery UI animate（）不起作用（）

<!DOCTYPE html> 
<html> 
<head> 
    <title>Jquerytest</title> 
    <link rel="stylesheet" href="styles.css" /> 
    <script src="lib/jquery-3.1.1.js"></script> 
    <script src="lib/jquery-ui-1.11.2/jquery-ui.js"></script> 
    <script> 
    $('document').ready(function() { 

    var menubutton_animation = 200; 
    $('.menubutton').hover(function(){ 
     $(this).animate({ color: "#D1571F" }, menubutton_animation); 
    }, function(){ 
     $(this).animate({ color: "#000000" }, menubutton_animation); 
    }); 

    $('.menubutton').click(function(){ 
     $('#targetframe').load('portfolio.html'); 
    }); 

    }); 
    </script> 
</head> 
<body> 
    <input class="menubutton" type="button" value="Portfolio" id="portfolio"> 
    <div id="targetframe"></div> 
</body> 
</html>

的styles.css中包含此：

@font-face { 
font-family: 'Comfortaa'; 
src: url('Comfortaa.eot'), 
     url('Comfortaa.ttf') format('truetype'); 
} 
.menubutton { 
    height:40px; 
    background:transparent; 
    border:none; 
    color:#000000; 
    cursor: pointer; 
    font-family:Comfortaa; 
    font-size:30px; 
}

預先感謝您。

來源

2017-02-08 gabyarg25

在單擊按鈕後，開發者控制檯中是否顯示任何錯誤？ –

只是這個XMLHttpRequest錯誤：主線程上的同步XMLHttpRequest已被棄用，因爲它對最終用戶的體驗有不利影響。如需更多幫助，請查看https://xhr.spec.whatwg.org/。我不認爲它是相關的 – gabyarg25

加載ajax生成的標記時，它不會保留它以前的功能。只要把它放在一個函數調用它，當你添加內容：

<script> 
    function load_animation(){ 
    var menubutton_animation = 200; 
    $('.menubutton').hover(function(){ 
     $(this).animate({ color: "#D1571F" }, menubutton_animation); 
    }, function(){ 
     $(this).animate({ color: "#000000" }, menubutton_animation); 
    }); 
    } 
    $(document).ready(function() { 
    load_animation(); 

    $('.menubutton').click(function(){ 
     $('#targetframe').load('portfolio.html'); 
     load_animation(); 
    }); 
    }); 
    </script>

應該「刷新」了jQuery後加載新的內容。

來源

2017-02-08 16:14:34

順便說一句，快速搜索引導我到這篇文章：http://stackoverflow.com/questions/13321292/reinitialize-other-javascript-functions-after-loading-a-page-with- ajax-paginatio –

我複製粘貼你的代碼，並沒有工作。我也讀過那篇文章，並且找不到這個初始化函數不起作用的原因。有任何想法嗎？ – gabyarg25

是的，我想我知道:)正確的語法是：$（document）.ready（function（）{ –

在AJAX加載後，JQuery UI animate（）不起作用（）

回答

相關問題