JQuery UI animate() не работает после загрузки AJAX()

У меня есть кнопка, которая меняет цвет при наведении курсора на и с использованием анимации JQuery UI(). Эта кнопка загружает страницу с AJAX при нажатии. Дело в том, что, как только я нажимаю эту кнопку, анимация(), похоже, не работает, она просто зависает в одном цвете.JQuery UI animate() не работает после загрузки AJAX()

<!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

yup Я думаю, что знаю :) правильный синтаксис: $ (document) .ready (function() { –

JQuery UI animate() не работает после загрузки AJAX()

ответ

Смежные вопросы