功能,从表中删除一行加入jQuery UI的

问题描述:

<HTML> 
    <HEAD> 
     <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
     <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" /> 
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
       $('#delrow').click(function(){ 
        alert(':)'); 
        $(this).closest('tr').animate({'backgroundColor':'#EF3E23','color':'#fff'},300,function(){ 
         $(this).remove(); 
        }); 
        return false; 
       }); 
      }); 
     </script> 
    </HEAD> 
    <BODY> 
    Hello 
     <table> 
      <tr> 
      <td>abc</td> 
      <td><a id="delrow" title="Click to remove" href="#">Delete</a></td> 
      </tr> 
     </table> 
    </BODY> 
</HTML> 

在这里,您可以测试我的代码后不工作:http://goo.gl/XNQb5j功能,从表中删除一行加入jQuery UI的

“删除”按钮应该从表中删除的行。 它不工作,当我不包括jQuery UI(但当然,动画不工作)。 我在做什么错?

对不起,我的英文错误。

+0

动画是关键。它无法正常工作,防止回调(动画结束时)被解雇。 – Mouser 2015-02-07 16:02:39

您链接的jQuery UI版本与您链接的jQuery版本不兼容。更好地从他们网站上的jQuery示例中获取版本号。

通知如何在版本兼容的代码工作:

<HTML> 
 

 
<HEAD> 
 
    <script src="http://code.jquery.com/jquery-2.0.2.js"></script> 
 
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" /> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
 
    <script type="text/javascript"> 
 
    $(document).ready(function() { 
 
     $('#delrow').click(function() { 
 
     alert(':)'); 
 
     $(this).closest('tr').animate({ 
 
      'backgroundColor': '#EF3E23', 
 
      'color': '#fff' 
 
     }, 300, function() { 
 
      $(this).remove(); 
 
     }); 
 
     return false; 
 
     }); 
 
    }); 
 
    </script> 
 
</HEAD> 
 

 
<BODY>Hello 
 
    <table> 
 
    <tr> 
 
     <td>abc</td> 
 
     <td><a id="delrow" title="Click to remove" href="#">Delete</a> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</BODY> 
 

 
</HTML>