单击带有 window.onbeforeunload 的链接时出现问题

Question

我有一个父 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 ? ";
      }

    }

  }
});

在这种情况下请帮助我。在此先感谢

Answer 1

只需将click() 事件添加到锚元素并取消绑定onbeforeunload 事件。

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

这只是一个例子。您可以向选择器添加一个类或 id，以便仅在单击特定锚标记时才解除绑定事件。

例如

$("#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;
    }
});