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

Question

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

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

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