0

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:

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

</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?

Hillux
  • 105
  • 1
  • 2
  • 10
  • There is a typo in categoryId where `i` should be capital – Ali Sheikhpour Nov 22 '20 at 13:45
  • 1
    @AliSheikhpour that's not an issue as jQuery's handling of data attributes is case-insensitive: https://jsfiddle.net/rfsza5vk/ – Rory McCrossan Nov 22 '20 at 13:45
  • Are the events really not firing at all as you state? When you inspect the element, are there any other event handlers on it that might be clashing with it? Also, I'd reduce the snippet with the blade code to just the part that renders the relevant elements. – El_Vanja Nov 22 '20 at 13:48
  • @El_Vanja No events firing at all and I don' have any other event handlers for the elements – Hillux Nov 22 '20 at 15:05
  • Do you see your click event on the element when inspecting? – El_Vanja Nov 22 '20 at 15:06
  • @El_Vanja No, I only see a lot of other document events which I assume are for the bootstrap dropdown clicks – Hillux Nov 22 '20 at 15:11
  • Yet when I asked if there are any other event handlers on the element, you answered "no". Most likely one of these events is clashing with yours. If you disable bootstrap, does your event work then? – El_Vanja Nov 22 '20 at 15:15
  • @El_Vanja after disabling bootstrap it fired but I cannot do away with bootstrap. – Hillux Nov 22 '20 at 15:22
  • 1
    So there you go - it's clashing with bootstrap's events. That's what you need to do next, search for a way to keep both theirs and your events. – El_Vanja Nov 22 '20 at 15:23

0 Answers0