Проблема при нажатии на ссылку с window.onbeforeunload - PullRequest
Новая
       15

Проблема при нажатии на ссылку с window.onbeforeunload

0 голосов
/ 16 мая 2018

У меня есть родительский div content_div, который содержит элементы формы внутри таблицы, где пользователь выбирает несколько элементов строки (строки, по которым можно кликать), download link elements и т. Д.

У меня есть всплывающее окно с предупреждением об изменениях пользователяГотово, а затем попробуйте обновить, не нажимая кнопку Сохранить.

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

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

Если я выберу какие-либо строки и затем попытаюсь щелкнуть по любой ссылке для загрузки, появится всплывающее окно, которое неверно вмой случай.

Если пользователь нажимает на некоторые другие ссылки за пределами моего # content_div, это показывает всплывающее окно, которое верно для меня. 

$(function() {
  var formmodified = 0;

  //click event for each row inside the table
  $(".course_row").click(function(e) {
    -- -- -
    formmodified = 1; //setting the variable to 1 means user 
    has changed something inside the page
  });
  //when form submits 
  $("#submit").click(function() {
    formmodified = 0; //assuming that form is saved after form change
  });
  //function for warning popup
  window.onbeforeunload = confirmExit;

  function confirmExit() {
    var element_clicked = 0;
    //#content_div is the main parent which contain the entire
    contents.

    $('#content_div').children().on('click', function(e) {
      console.log('clicked');
      element_clicked = 1; //means the clicked element is inside the #content_div which can be a link or other things

    });
    console.log(element_clicked);
    EDIT: I am always getting element_clicked value as 0 when I click any element inside the div.The value 'clicked'
    is showing.I dont know why the value
    for the variable is not setting to 1


    if (element_clicked) {
      //element_clicked = false;  
      return; // abort beforeunload
    } else {
      if ((!element_clicked) && (formmodified == 1)) {
        return "The selected courses are not saved.
        Do you wish to leave the page ? ";
      }

    }

  }
});

Пожалуйста, помогите мне в этом случае. Спасибозаранее

1 Ответ

0 голосов
/ 16 мая 2018

Просто добавьте событие click() к элементам привязки и отмените привязку onbeforeunload событие. 

$("a").on('click', function() {
  window.onbeforeunload = null;
});

Это только пример.Вы можете добавить класс или идентификатор к селектору, чтобы событие отменялось только при нажатии на определенный тег привязки.

Например, 

$("#content_div a").on('click', function() {
  window.onbeforeunload = null;
});

РЕДАКТИРОВАТЬ

Если вы хотите добавить onbeforeunload для обновления, вы должны либо сделать это, когда произойдет изменение, либо добавить событие, когда нажата кнопка F5.

Если честно, я думаю, что первое решение лучше, потому что тогда, даже если пользователь нажмет кнопку обновления в браузере, всплывет всплывающее окно.

Так что вам придется изменить свою функциональность.

Если вы не хотите, чтобы.Вот быстрое добавление к кнопке F5. 

$(document.body).on("keydown", this, function (event) {
    if (event.keyCode == 116) {
        window.onbeforeunload = true;
    }
});
...