JQuery UI animate（）は、AJAX load（）の後に動作しません。

JQuery UIのanimate（）を使用してマウスを移動したときに色が変わるボタンがあります。このボタンは、クリックするとAJAXでページを読み込みます。問題は、いったんそのボタンをクリックすると、animate（）は機能していないように見えます。ちょうど1つの色でフリーズします。JQuery UI animate（）は、AJAX load（）の後に動作しません。

<!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（）{ –

JQuery UI animate（）は、AJAX load（）の後に動作しません。

答えて

関連する問題