JQuery Click() not firing on items added by laravel blade for loop

  html, jquery, laravel, laravel-blade, php

I have a dropdown menu where the menu items are filled dynamically from the DB using laravel blade template language. I’m trying to fire on click events on the menu items by JQuery click() by a class selector function but nothing is happening.

Here’s the menu:

<div class="navbar-container main-menu-content" data-menu="menu-container">
                <ul class="nav navbar-nav" id="main-menu-navigation" data-menu="menu-navigation">
                    <li class="dropdown nav-item" data-menu="dropdown">
                        <a class="dropdown-toggle nav-link" href="#" data-toggle="dropdown">
                            <i class="feather icon-layers"></i>
                            <span data-i18n="Pages">Home</span>
                        </a>
                        <ul class="dropdown-menu">
                            @foreach ($categories as $cat)
                                <li data-menu="">
                                    <a class="dropdown-item category_item" href="#" data-toggle="dropdown" data-categoryId="{{ $cat->id }}">
                                        <i class="feather icon-package"></i>{{ $cat->name }}</a>
                                </li>
                            @endforeach
                        </ul>
                    </li>
                    @foreach ($levels as $level)
                        <li class="dropdown nav-item" data-menu="dropdown">
                            <a class="dropdown-toggle nav-link level_item" href="#" data-toggle="dropdown"><i class="feather icon-package"></i>
                                <span data-levelId="{{ $level->id }}">{{ $level->name }}</span>
                            </a>
                            <ul class="dropdown-menu">
                                @if (is_null($level->subjects))
                                    <li data-menu="">
                                        <a class="dropdown-item" href="#" data-toggle="dropdown">
                                            <i class="feather icon-alert-octagon"></i>No subjects</a>
                                    </li>
                                @else
                                    @foreach($level->subjects as $subject)
                                        <li data-menu="">
                                            <a class="dropdown-item subject_item" href="#" data-toggle="dropdown" data-subjectId="{{ $subject->id }}">
                                                <i class="feather icon-book"></i>{{ $subject->name }}</a>
                                        </li>
                                    @endforeach
                                @endif
                            </ul>
                        </li>
                    @endforeach
                </ul>
            </div>

An here’s the JS in the base template where the menu is being included using @include()

<script>
    $(function () {
        $(".category_item").click(function(e){
            e.preventDefault();
            var $cat_id = $(this).data('categoryid');
            console.log("logging: I was cliked", $cat_id);
        });
    });
</script>

Could someone catch what I’m doing wrong?

Source: Laravel

Leave a Reply