Why does redirect happen before my jquery click event is fired for a html anchor element?

Question

I'm trying to trigger the OnBeforePageUnload only when the user closes the tab or browser window. When the user navigates on my website, I have a custom mechanism that will trigger a warning dialog to prevent the user from losing entered data. So every time a link on my page has been clicked, I set the a flag:

$('a[href]').click(function (event) {
    buttonOutsidePageClicked = false;
});

Then, the onbeforepageunload event is triggered. I check the value of the flag to see if I should show the built in onbeforeunload dialog or not:

function OnBeforeUnload(oEvent) {
if (buttonOutsidePageClicked)
    return navAwayMessage;   
}

This works fine for all my links on the page except for the following one:

 <a id="cpm_UploadLink" class="button" rel="no" href="/pages/otherPage">
    <span class="btnLeft"></span>
    <span class="btnMiddle">Click Me</span>
    <span class="btnRight"></span>
 </a>

These html is created by a custom web control. When i click on the link, i get redirected to the otherPage without the click event has been triggered. So i cannot set the flag and the built in onbeforeunload message is shown.

When I add an inline add the onclick attribute directly in the control like this:

 <a id="cpm_UploadLink" class="button" rel="no" href="/pages/otherPage"
     onclick="javascript:buttonOutsidePageClicked = false;">
        <span class="btnLeft"></span>
        <span class="btnMiddle">Click Me</span>
        <span class="btnRight"></span>
 </a>

Everything works fine. But that's not the way i want to resolve this.

Can someone explain to me what mistake i'm making here?

I have been looking and trying a lot of code but with no success.

I found this post Preventing Links before jQuery is Loaded but i don't know if this has anything to do with my problem because i only have it with one link.

Thanks in advance for any help.

Answer 1

Since your html is created by custom web control, you might need use live() or on() for JQuery 1.7 and above to bind your click event.

For example:

$("body").delegate("a","click", function () {
        buttonOutsidePageClicked = false;
    });

from jquery version 1.7 use this:

$("body").on("click", "a", function () {
    buttonOutsidePageClicked = false;
});

JQuery live()

View online example here