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

Question

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

导航UI

<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')}}" alt=""><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')}}" alt=""><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')}}" alt=""><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')}}" alt=""><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 --}}

GET模块的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);
                });

Answer 1

试试这个..。

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

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

Answer 2

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

您是否尝试过委托这样的事件：(它与动态创建一样好)

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

您只需选择父选择器，并将事件委托给所需的孩子。抱歉我的英语..。