CODEWITHSUNDEEP
jqueryhtmlhyperlink
b85411
b85411

Reputation: 10010

Nested links in jQuery/html

This is my code:

            <li>
                <a href="{{ path('homepage') }}" class="active">
                    <i class="fa fa-tasks fa-fw"></i> 
                    {% trans %} global.item {% endtrans %} <span id="pending-badge" class="badge pull-right">{{ pendingItems() }}</span>
                </a>
            </li>

And I have this jQuery too:

    $('#pending-badge').click(function () {
        window.location.href = '{{ path('pending') }}';
    });

However I've noticed clicking the badge doesn't actually redirect me to that page.

If I put console.log('test'); in the jQuery function I do see it in the console so I know the event is being registered. But I think because it's occurring in that broader <a> link it's just defaulting to that (homepage) instead of the link I provide (pending) in the jQuery.

How can I fix this?

Upvotes: 0

Views: 262

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

You can prevent the default action by return false or by calling event.preventDefault()

$('#pending-badge').click(function (e) {
    window.location = 'http://google.com';
    return false;
});

Upvotes: 1

Related Questions