选择使用 ajax 动态生成的锚标记 ID

Posted 2023-03-25

【中文标题】选择使用 ajax 动态生成的锚标记 ID

【英文标题】：Select anchor tag ID that's dynamically generated using ajax

【发布时间】：2021-03-07 02:15:43

【问题描述】：

问题： 我总共有 3 个标签，第一个是部门标签，第二个是他们的模块，第三个是他们的菜单。通过点击部门时使用ajax，部门ID传递给控制器​​并返回模块，模块数组动态附加在标签中。但是遇到的问题是单击这些生成的模块以获取它们的 id 并传递给菜单控制器以获取菜单。但不幸的是没有得到任何数据ID。

导航用户界面

<div class="row">
    <div class="col-md-2 ">
        <h4 class="ml-4">ASFF IT</h4>
    </div>
    <div class="col-md-7">
    </div>
    <div class="col-md-3 mt-2 text-right">
        <div class="row">
            <div class="col-md- header-options">
                <img src="URL::asset('assets/images/icons/preferences.gif')" ><a href="#" class="pr-2 fs-12"> Preferences</a></i>
            </div>
            <div class="col-md- header-options">
                <img src="URL::asset('assets/images/icons/lock.gif')" ><a href="#" class="pr-2 fs-12"> Change Password</a></i>
            </div>
            <div class="col-md- header-options">
                <img src="URL::asset('assets/images/icons/help.gif')" ><a href="#" class="pr-2 fs-12"> Help</a></i>
            </div>
            <div class="col-md- header-options">
                <img src="URL::asset('assets/images/icons/login.gif')" ><a href="#" class="pr-2 fs-12"> Logout </a></i>
            </div>
        </div>
    </div>
</div>
-- First Navbar --
<nav class="navbar navbar-1 navbar-expand-lg">
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav nav-1">
            @forelse($departments as $department)
                <li class="nav-item border-left">
                    <a class="nav-link departments" type="button" data-id="$department->id">$department->name</a>
                </li>
            @empty
                <li class="nav-item border-left">
                    <a class="nav-link" href="">No Records found</a>
                </li>
            @endforelse
        </ul>
    </div>
</nav>
-- End First Navbar --
-- Second Navbar --
<nav class="navbar navbar-2 navbar-expand-lg mt-1">
    <div class="collapse navbar-collapse">
        <ul id="modules" class="navbar-nav nav-2">
        </ul>
    </div>
</nav>
-- End Second Navbar --
-- Third Navbar --
<nav class="navbar navbar-2 navbar-expand-lg mt-1">
    <div class="collapse navbar-collapse">
        <ul id="menus" class="navbar-nav nav-2">
        </ul>
    </div>
</nav>
-- End Third Navbar --

获取模块的 AJAX

                $(".departments").on("click",function ()
                    let department_id = $(this).attr('data-id');
                    $.ajax(
                       url: 'URL::asset('home/modules')/'+department_id,
                       type: 'GET',
                       success: function (response)
                           //Empty Module header
                           $("#modules").empty();
                           //traverse array
                           if (response.length != 0)
                               $.each(response, function (key,value)
                                   // append modules in module header
                                   $("#modules").append('<li class="nav-item border-left">\n' +
                                       '<a class="nav-link abc" type="button" data-id="'+key+'">'+value+'</a>\n' +
                                       '</li>');
                               );
                           else 
                               $("#modules").append('<li class="nav-item border-left">\n' +
                                   '<a class="nav-link" type="button">No Records found</a>\n' +
                                   '</li>');
                           
                       ,
                       error: function (error)
                           $("#modules").append('<li class="nav-item border-left">\n' +
                               '<a class="nav-link" type="button">Error Encounter ! Contact ASFF IT Department</a>\n' +
                               '</li>');
                       
                    );
                );
                // Modules Body Ends here

问题代码

$(".abc").on("click", function (e) 
                    e.preventDefault();
                    let module_id = $(this).attr('data-id');
                    console.log(module_id);
                );

【参考方案1】：

试试这个...

 $(document).on('click', '.abc', function(e) 

        e.preventDefault();
        let module_id = $(this).attr('data-id');
        console.log(module_id);
);

【参考方案2】：

我不知道当您激活事件单击时，如果您在加载 html 之前激活事件，则该事件不会看到创建的新类，但是，

您是否尝试过像这样委派事件：（可以动态创建）

$("#module").on("click", ".abc", function (e) 
                    e.preventDefault();
                    let module_id = $(this).attr('data-id');
                    console.log(module_id);
                );

您只需选择一个选择器父级并将事件委托给想要的子级。对不起我的英语......