CODEWITHSUNDEEP
javascriptjquery
ToxifiedHashkey
ToxifiedHashkey

Reputation: 267

Unable to use 'id' selector within if condition - JQuery

I am unable to target an element with an id, whenever there is a click event. It's a pretty simple solution, no idea why this isn't working out. Please help me with it.

    $('ul.main-menu li').click(function(e) {
        e.preventDefault();

        if ($(this).siblings('li').find('a').has('#has-sub-menu')) {
            alert('sub-menu')
        }

    }); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main-menu">
    <li class="main-menu-item">
        <a href="#">Home</a>
    </li>

    <li class="main-menu-item">
        <a id="has-sub-menu" href="#">Company</a>
    </li>
</ul>

Upvotes: 0

Views: 40

Answers (2)

zoldxk
zoldxk

Reputation: 1

You can directly add the click event on the a with the id:

    $('#has-sub-menu').click(function(e) {
        e.preventDefault();
            alert('sub-menu');
    }); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main-menu">
    <li class="main-menu-item">
        <a href="#">Home</a>
    </li>

    <li class="main-menu-item">
        <a id="has-sub-menu" href="#">Company</a>
    </li>
</ul>

Upvotes: 1

Michael Mano
Michael Mano

Reputation: 3440

so the li is not the click event, the A is.

I've also made it a class of submenu. not an ID.

<ul class="main-menu">
    <li class="main-menu-item">
        <a href="#">Home</a>
    </li>

    <li class="main-menu-item">
        <a class="has-sub-menu" href="#">Company</a>
    </li>
</ul>

<script >
    $('ul.main-menu li a').click(function(e) {
        e.preventDefault();

        if ($(this).hasClass('has-sub-menu')) {
            alert('sub-menu')
        }

    }); 
</script>

Upvotes: 1

Related Questions