Question

我遇到了jquery的问题。我有一个包含多个记录的表，每个记录都有删除链接。单击该链接时删除特定记录。这很好，但我正在尝试的是当一个记录被删除它只是消失而没有任何页面刷新。为此，我有一个jquery代码，可以在独立的页面上正常工作，但是当我尝试将它与我的实际代码集成时，根本没有任何事情发生。我用jQuery替换$但仍然没有发生任何事情。我还检查了其他原因，但没有任何效果。有人可以指出可能缺少的东西或我做错了。代码如下：

这是我的行代码，它在foreach中，因此创建了多个

<tr class="showdel">
   <td class="align"><input type="checkbox" name="instanceids[]" id="checkid" value="<?php echo $instanceid; ?>" /></td>
   <td class="align"><?php echo $i++.'.'; ?></td>
   <td><?php echo $title; ?></td>
   <td><a href="javascript:void(0);" class="delete" id="<?php echo $instanceid; ?>">Delete</a></td>
</tr>

下面是我的jquery代码，它删除了记录，它就会消失。它位于页面的头部。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
        jQuery(function()
        {
            jQuery(".delete").click(function()
            {
                var element = jQuery(this);
                var del_id = element.attr("id");
                var info = 'id=' + del_id;
                if(confirm("Are you sure you want to delete this?"))
                {
                    jQuery.ajax({
                        type: "POST",
                        url: "content_list.php",
                        data: info,
                        success: function() {}
                    });

                    jQuery(this).parents(".showdel").animate({ backgroundColor: "#003" }, "slow")
                    .animate({ opacity: "hide" }, "slow");
                }
                return false;
            });
        });
        </script>

请指出我做错了什么。提前谢谢。

PS：这是我的整个部分。看看这是否有帮助。可能是脚本的排序是错误的。

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title><?php echo $client; ?> Admin</title>
    <!-- bootstrap core css -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- custom css -->
    <link href="css/sb-admin.css" rel="stylesheet">

    <!-- style.css -->
    <link href="css/style.css" rel="stylesheet">

    <!-- paginng css -->
    <link href="css/pagination.css" rel="stylesheet">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript">
    jQuery(".delete").click(function()
    {
        var element = jQuery(this);
        var del_id = element.attr("id");
        var info = 'id=' + del_id;
        if(confirm("Are you sure you want to delete this?"))
        {
            jQuery.ajax({
                type: "POST",
                url: "content_list.php",
                data: info,
                success: function() {}
            });

            jQuery(this).parents(".show").animate({ backgroundColor: "#003" }, "slow")
            .animate({ opacity: "hide" }, "slow");
        }
        return false;
    });
    </script>

    <!-- form validation scripts -->
    <script type="text/javascript" src="js/validate_category.js"></script>
    <script type="text/javascript" src="js/validate_subcategory.js"></script>
    <script type="text/javascript" src="js/validate_subsubcategory.js"></script>
    <script type="text/javascript" src="js/selectall.js"></script>

    <script type="text/javascript" src="js/validate_content.js"></script>
    <script type="text/javascript" src="js/validate_resource.js"></script>
    <script type="text/javascript" src="js/validate_data.js"></script>
    <script type="text/javascript" src="js/ajax_scripts.js"></script>
</head>

此外，我的表由ajax调用加载，如下面指出的Alpesh Panchal。

Answer 1

由于您的数据表是通过ajax调用加载的，因此在加载数据之前尝试设置事件处理程序时，您选择的jQuery(".delete")实际上是空的。因此，解决方案是将事件处理程序设置为document本身，并为.delete元素设置过滤器。像这样：

jQuery(document).on('click',".delete",(function()
{
  //Your code
});

Answer 2

确保在页面加载期间使用firebug控制台检查任何javascript错误。有时javascript错误会阻止javascript的其余部分执行。
确保您的表未通过ajax调用加载。如果是，那么jQuery的click事件将不会绑定到它。要绑定它，您需要使用ajaxStop（）事件处理程序来绑定删除函数。
如果ajaxStop（）不起作用，那么您可以单独创建删除点击功能，并在“onclick”链接事件中调用

e.g。

<td>
    <a href="javascript:void(0);" onclick="return delete_function();" class="delete" id="<?php echo $instanceid; ?>">Delete</a>
</td>

Answer 3

使用jQuery .animate()方法，只能为数值设置动画（例如＆＃34; margin：30px＆＃34;）。字符串值无法设置动画（例如＆＃34;背景颜色：红色＆＃34;）。

除了其他Javascript代码之外，Jquery根本不工作

3 个答案: