AJAX load() 후 JQuery UI animate()가 작동하지 않습니다.

JQuery UI의 animate()를 사용하여 마우스를 가져갈 때 색상이 바뀌는 버튼이 있습니다. 버튼을 클릭하면 AJAX가있는 페이지가로드됩니다. 그 버튼을 클릭하면 animate()가 작동하지 않는 것입니다. 단 하나의 색상으로 정지됩니다. AJAX load() 후 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

아약스 생성 마크 업을로드하면 이전에 있던 기능이 유지되지 않습니다. 콘텐츠를 추가 할 때 그냥 함수에 전화를 넣어 :

<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 load() 후 JQuery UI animate()가 작동하지 않습니다.

답변

관련 문제