AJAX load() 后 JQuery UI animate() 不起作用答案

【问题标题】：JQuery UI animate() doesn't work after AJAX load()AJAX load() 后 JQuery UI animate() 不起作用
【发布时间】：2017-02-08 15:52:12
【问题描述】：

我有一个按钮，当使用 JQuery UI 的 animate() 悬停时，它会改变颜色。单击该按钮时，将加载带有 AJAX 的页面。问题是，一旦我单击该按钮，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;
}

提前谢谢你。

【问题讨论】：

点击按钮后开发者控制台是否显示错误？
只是这个 XMLHttpRequest 错误：主线程上的同步 XMLHttpRequest 已被弃用，因为它对最终用户的体验产生不利影响。如需更多帮助，请查看xhr.spec.whatwg.org。我不认为这是相关的

标签： jquery ajax jquery-ui load jquery-animate

【解决方案1】：

当您加载 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。

【讨论】：

顺便说一下，快速搜索将我带到这篇文章：stackoverflow.com/questions/13321292/…
我复制粘贴了您的代码，但没有用。我还阅读了其他帖子，但找不到此初始化功能不起作用的原因。有什么想法吗？
是的，我想我知道 :) 正确的语法是：$( document ).ready(function() {
真的很抱歉，之前的代码运行良好。我的错。谢谢！