Do preventDefault and then do default behavior

Question

I have a requirement in a single page application project, where I need to change a page's section when I click on a anchor tag based on the provided href attribute. Something like this:

<a class="page-click" href="#showPeople/1">Open</a>

This anchor is in a popup on that page. So, whenever I click on this anchor tag, the anchor should close the popup and change the window location to

http://www.example.com/#showPeople/1

Now, the anchor is changing the url (which is by default) but not closing the popup.

When I researched I found that for anchors, I should use e.preventDefault() to remove default behavior. But in my case, I need both default behavior as well as the custom behavior (closing the popup).

I found this link which has similar requirement but the thing is that I am attaching event dynamically.

$(document).on('click', '.page-click', function (e) {
     // e.preventDefault();
     // code here
});

and even if I somehow succeeded to unbind the event from that specific clicked anchor, the anchor will not close the popup, when the user opens the popup again (since the registered event has been removed).

[Here is one way](https://gist.github.com/humbleRumble/6b2ff1b406bdac61694c). Or am I missing the mark? — , Jul 02 '15 at 06:47
@JqueryKing Here is a [fiddle](http://jsfiddle.net/te8kw96n/). I am not sure how to include backbone to show single page application behavior though. — Mr_Green, Jul 02 '15 at 06:50
@TinyGiant At a glance, I thought it should work but it is actually creating a recursive effect. — Mr_Green, Jul 02 '15 at 06:53
I guess then you would have to set a variable and check whether it is true before executing the function (including the preventDefault) — , Jul 02 '15 at 06:54
just close popup in your callback **do not prevent default action** and it will be the solution — YarikKotsur, Jul 02 '15 at 06:55
@YarikKotsur nice but that means I need to write closepopup function in all those different callbacks. (_there are many, I will go with this if there is no better way_) — Mr_Green, Jul 02 '15 at 06:57
@Mr_Green maybe this can help https://gist.github.com/shults/4968e851b2cb2931cd89 — YarikKotsur, Jul 02 '15 at 07:03
@TinyGiant I really like your idea. but is somehow not triggering the click event again. I mean this code is not triggering: `$(this).click()`. — Mr_Green, Jul 02 '15 at 07:07
Well, I'm heading to bed for the night. If you haven't figured it out by morning, I'll work on it some more. — , Jul 02 '15 at 07:16

score 1 · Accepted Answer · answered Jul 02 '15 at 06:57

1

Try

$('button').click(function () {
    $('body').toggleClass('active');
});
$(document).on('click', 'a.page-click', function (e) {
    e.preventDefault();
    var $this = $(this);
    $('.popup').hide('fast', function() { 
        window.location.href = "http://example.com/" + $this.attr('href');
    });
});

answered Jul 02 '15 at 06:57

Sudharsan S

15,336
3
31
49

Thanks. I hate to hardcode the url but I think there is no other way around. – Mr_Green Jul 02 '15 at 07:25

score -1 · Answer 2 · answered Jul 02 '15 at 06:50

I am not sure if this will work for you but once I had a requirement of keeping a html tag as <a href="#">Demo</a>but I just wanted it as a placeholder and the requirement was not to change url in address bar.I did following

$('a').click(function() {
    // below line prevents the 'href' from followed.
    return false;
});

I guess you can try this.

Do preventDefault and then do default behavior

2 Answers2