javascript - 表单更改时显示固定 DIV，保存表单时隐藏它

Question

我有一个带有 HTML 表单的页面，用于添加/编辑/删除项目任务行。它们被保存到数据库中。

由于此页面可能非常长/高，因此现在页面顶部和底部有一个 SAVE 按钮，使用 AJAX 保存所有更改。

为了让事情变得更容易，让用户进行“保存”，我想在屏幕顶部显示一个带有“保存”按钮的固定 DIV。

此 FIXED DIV 仅应在存在未保存的更改时显示。因此，当页面加载时，您不会立即看到此内容，除非您在页面上进行更改。这时它就出现了。

单击 AJAX 保存按钮会将任务记录保存到数据库，然后固定 DIV/SAVE 按钮将再次隐藏，直到检测到另一个更改。

现在我已经完成了 90% 的工作。

我有 JavaScript，其中的事件调用我的 showTaskUnSavedChangesHeaderBar() 函数，如下所示:

• 文本输入已更改
• 文本区域已更改
• 选择下拉菜单已更改
• 点击按钮添加新任务行
• 点击按钮删除任务行/记录

如您所见，我已准备好代码来检测页面上的CHANGE。然后，这会触发我的函数，使我的带有保存按钮的固定 DIV 进入 View 。

现在，一旦您单击“保存”按钮，我就会使用 AJAX 保存数据，然后调用我的 hideTaskUnSavedChangesHeaderBar() 函数，如下所示。

这使得带有保存按钮的固定 DIV 恢复为隐藏状态，并设置了 CSS display: none 属性。

到目前为止，上述所有内容都按预期工作，除了在我的 showTaskUnSavedChangesHeaderBar() 函数 中，我添加了一些代码，使固定 DIV 仅在您向下滚动屏幕时至少显示 100px，这样它现在就不会显示在屏幕的最顶部。

这个滚动触发器部分也可以正常工作。

问题是，一旦您进行保存并调用 hideTaskUnSavedChangesHeaderBar() ，它就会隐藏固定 DIV，但一旦您再次滚动，它就会继续显示出来，即使没有屏幕上的数据发生了新的变化。

只要看看下面的代码，有人可以告诉我我错过了什么吗？当我的 hideTaskUnSavedChangesHeaderBar() 函数被调用并且 DIV 被隐藏时，它应该重新设置进程，直到页面上发生另一个更改，但我一定错过了一些东西，因为一旦它隐藏了一个px 向上或向下滚动会再次触发它回到 View

更新
似乎当我的 hideTaskUnSavedChangesHeaderBar() 函数被调用时，我需要以某种方式终止此事件 $(window).scroll(function() 直到 showTaskUnSavedChangesHeaderBar( ) 函数再次被调用，这可能吗？

我意识到 JSFiddle 页面可能会有所帮助，如果没有很快发布简单的解决方案，我将致力于设置一个页面。我推迟了，因为我的页面非常复杂，我必须将其简化很多才能让 fiddle 用于演示

// When there are Un-Saved changes on the Task Edit view, show a Fixed Header DIV with a SAVE Button
function showTaskUnSavedChangesHeaderBar(){
  if ($('#task-edit-unsaved-header-bar').length > 0) {
    var unSavedChangesHeaderBar = $('#task-edit-unsaved-header-bar');
    var fixmeTop = 100;

    $(window).scroll(function() {
      var currentScroll = $(window).scrollTop();
      if (currentScroll >= fixmeTop) {
        unSavedChangesHeaderBar.css({
            display: 'block',
            position: 'fixed',
            top: '0',
            left: '10'
        });
      }
    });
  }
}



// When there are Un-Saved changes on the Task Edit view, show a Fixed Header DIV with a SAVE Button
function hideTaskUnSavedChangesHeaderBar(){
  if ($('#task-edit-unsaved-header-bar').length > 0) {
    var unSavedChangesHeaderBar = $('#task-edit-unsaved-header-bar');
    unSavedChangesHeaderBar.css({
        display: 'none'
    });
  }
}

Answer 1

您在函数中绑定(bind)了一个事件

$(window).scroll(function() {

因此，此代码将始终在滚动时触发。如果您调用 showTaskUnSavedChangesHeaderBar 它甚至会多次绑定(bind)处理程序，使其多次触发。

解决方案

当不再需要时，您必须取消绑定(bind)此事件处理程序。更好的方法是将它放在外面的某个地方，然后在函数中切换一个标志变量，以便您的滚动处理程序知道要做什么。