添加jQuery UI后,从表中删除行的功能无效

时间:2015-02-07 15:48:27

标签: javascript jquery

<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时,它正在工作(但当然,动画不起作用)。 我做错了什么?

对不起我的英文错误。

1 个答案:

答案 0 :(得分:1)

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

注意版本兼容时代码的工作原理:

&#13;
&#13;
<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>
&#13;
&#13;
&#13;