Почему перенаправление происходит до того, как сработало мое событие jquery click для элемента привязки html?

Question

Я пытаюсь вызвать OnBeforePageUnload только тогда, когда пользователь закрывает вкладку или окно браузера.Когда пользователь перемещается по моему сайту, у меня есть собственный механизм, который запускает диалоговое окно с предупреждением, чтобы предотвратить потерю введенных данных пользователем.Поэтому каждый раз, когда щелкают ссылку на моей странице, я устанавливаю флаг:

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

Затем запускается событие onbeforepageunload.Я проверяю значение флага, чтобы увидеть, должен ли я отображать встроенный диалог onbeforeunload или нет:

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

Это прекрасно работает для всех моих ссылок на странице, кроме следующей:

 <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>

Эти HTML создаются с помощью пользовательского веб-элемента управления.Когда я нажимаю на ссылку, меня перенаправляют на другую страницу без запуска события click.Поэтому я не могу установить флаг, и отображается встроенное сообщение onbeforeunload.

Когда я добавляю встроенный атрибут, добавьте атрибут onclick непосредственно в элемент управления следующим образом:

 <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>

Все работает нормально.Но я не хочу решать эту проблему.

Может кто-нибудь объяснить мне, какую ошибку я здесь совершаю?

Я искал и пробовал много кода, но безуспешно,

Я нашел этот пост Предотвращение ссылок до загрузки jQuery , но я не знаю, связано ли это с моей проблемой, потому что у меня есть только одна ссылка.

Заранее спасибо за любую помощь.

Answer 1

Поскольку ваш html создается с помощью пользовательского веб-элемента управления, вам может потребоваться использовать live() или on() для JQuery 1.7 и выше, чтобы связать событие щелчка.

Например:

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

из jquery версии 1.7 используйте это:

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

JQuery live ()

Просмотреть онлайн-пример здесь

Answer 2

Прежде всего: Вы можете изменить свой код следующим образом:

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

Ваш ответ, вероятно, заключается в следующем:

Эти html создаются пользовательским веб-элементом управления

Они либо захватывают событие click, чтобы не вызывать обработчики щелчков jQuery, либо используют событие click для внутреннего элемента (ов) <span>.

Вы можете использовать firebug илиИнструменты разработчика Chrome для просмотра всех слушателей событий.Убедитесь, что одним из них является jQuery.