Nested links in jQuery/html

Question

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?

Arun P Johny · Accepted Answer · 2015-02-24 01:08:11Z

1

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;
});

answered Feb 24, 2015 at 1:08

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

b85411 Over a year ago

Perfect. Thanks... out of interest if I returned "true", would that mean it would continue and allow the default action?

Collectives™ on Stack Overflow

Nested links in jQuery/html

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related