Select anchor tag ID that's dynamically generated using ajax

Question

Problem: I have total 3 tag first for departments, second for their modules and third for their menus. By using ajax when click on department, department id pass on controller and return modules and the array of modules dynamically append in tag. But the problem encounter where click on these generated modules to get their id and pass to menus controller to get menus. but unfortunately didn't get the any of data-id.

NAVIGATION 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 --}}

AJAX OF GET MODULES

                $(".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

PROBLEM CODE

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

Answer 1

try this...

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

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

Answer 2

i dunno when you activate the event click, if you activate the event before the html loaded, the event doesnt see the new class created but,

have you try to delegate the event like this: (its ok with dynamic creation)

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

you just take a selector parent and delegate the event to the children wanted. sorry for my english...