Question

我的页面旁边有一个菜单，此菜单有很多要导航的项目。好吧，在管理页面中，我有一个表来管理这些项目。当我删除表中的项目（删除是在ajax中进行）时，该项目将在表格和菜单中删除。我使用函数load来加载菜单中的项目。但是当我删除项目两次或更多次时，会出现很多根据删除的元素数量确认弹出窗口。

看图像。当我单击删除按钮时，此项目将在数据库中删除，表格将删除该项目。当我第一次删除某个项目时，它会显示一次确认弹出并删除该项目。直到这里，这是正确的。但是当我删除第二个，第三个以上的项目时，确认弹出窗口保持活动状态，并根据删除的元素数量多次显示。错误在哪里？

菜单代码：

echo '<div id="slide-out" class="side-nav sn-bg-4 fixed mdb-sidenav">
            <ul id="menu_ul" class="custom-scrollbar list-unstyled" style="max-height:100vh;">
                <!-- Side navigation links -->
                <li>
                    <ul id="side-menu" class="collapsible collapsible-accordion">
                    <li id="home" class="menu-item menu-item-type-custom menu-item-object-custom"><a class="collapsible-header waves-effect" href="/admin/view/main.php"><img src="/imgs/icones/ic_home.png">Home</a></li>';

    foreach ($Menu_array as $valor)
    {

        echo '<li id='. $valor->getCategoria()->getCat_id() .' class="menu-item menu-item-type-custom menu-item-object-custom'. $menu_filhos .'"><a class="collapsible-header waves-effect '"><img style="margin-right:10px; vertical-align: text-bottom; text-align:left" src="'.$valor->getCategoria()->getCat_img().'">'. $valor->getCategoria()->getCat_nome().'</a>';

            $array_SCat = [];
            $array_SCat = $valor->getlist_SCat();

            if((count($valor->getlist_SCat())) > 0)
            {
                echo '<div class="collapsible-body">
                        <ul class="sub-menu">';

                foreach($array_SCat as $val)
                {
                    echo '<li class="menu-item menu-item-type-post_type menu-item-object-page '"><a class="collapsible-header waves-effect" id='.$val->getSCat_id().' href="'.$variaveis->getDominio().'/'.$variaveis->getNome_site().'/admin/view/ld.php?id_cat='.$valor->getCategoria()->getCat_id().'&id_subcat='.$val->getSCat_id().'">'.$val->getSCat_nome().'</a></li>';
                }
                    </ul>
                </div>';
            }
        }
    }
        echo '</ul>
        </li>
        <!-- /. Side navigation links -->
        </ul>
    </div>';

删除项目的表格代码：

<table width="100%">
    <tbody>
         <tr>
              <td><a id="deleteItem" name="'.$val->getSCat_id().'">Delete</a></td>
         </tr>

ajax代码：

$(document).on("click", "#deleteItem", function(e) {

    e.preventDefault();

    var idItem = $(this).attr('name');
    var $tr = $(this).closest('tr');

    if (confirm('Deseja excluir o item?')) {

        $.ajax({
            url: '/admin/control/ajax/remove.php',
            type: 'POST',
            data: {id: idItem},
            dataType: 'html',
            success: function(response) {

                var result = $.trim(response);

                if(result === "success") {

                    $tr.find('td').fadeOut(800,function(){ 
                        $tr.remove();
                    });

                    $("body").load('#slide-out');

                } else if(result === "error") {

                    alert("Error.");

                }

            }

        });

    }

});

注意我是在ajax中做到的：

$("body").load('#slide-out');

正文调用菜单ID滑出来加载。

Answer 1

尝试将“deleteItem”的属性 id 更改为class。这里的地方：

标记

<td><a class="deleteItem">Delete</a></td>

JS

$(document).on("click", ".deleteItem", function(e) {});

删除项目后多次确认框 - ajax

1 个答案:

标记

JS