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

Question

我有一个按钮，当使用 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;
}

提前致谢。

Answer 1

当您加载 ajax-generated 标记时，它不会保留之前的功能。只需将它放在一个函数上，然后在添加内容时调用它即可：

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

加载新内容后 "refresh" 应该 jquery。

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

JQuery UI animate() doesn't work after AJAX load()

ajax

jquery

load

jquery-ui

jquery-animate