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生成的标记时，它将不会保留以前的功能。只需将其添加到函数中，在添加内容时调用它：

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

在AJAX load（）之后，JQuery UI animate（）不起作用

1 个答案: