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; } });

使用window.onbeforeunload单击链接时出现问题

1 个答案: