Question

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

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

为了方便起见，让用户制作SAVE我希望使用SAVE按钮在屏幕顶部显示FIXED DIV。

此FIXED DIV应仅在Un-Saved changes时显示。因此，当页面加载时，您不会立即看到这一点，直到您在页面上进行更改。那时它会进入视野。

单击AJAX Save按钮将Task记录保存到Database，然后Fixed DIV / SAVE按钮将再次隐藏，直到检测到另一个Change。

现在我有90％的工作时间。

我有JavaScript，其活动会调用我的showTaskUnSavedChangesHeaderBar() Function，如下所示：

文字输入已更改
Textarea已更改
选择下拉列表已更改
按钮单击以添加新任务行
按钮单击以删除任务行/记录

因此，当您看到我有代码检测页面上的CHANGE时。然后触发我的功能，使我的固定DIV与保存按钮进入视图。

现在，当您单击“保存”按钮后，我使用AJAX保存了数据，然后调用我的hideTaskUnSavedChangesHeaderBar() Function，这也显示在下面。

这使得使用“保存”按钮的“固定DIV”返回到隐藏了它的CSS display: none属性集。

到目前为止，上述所有内容都按预期工作，除了我的showTaskUnSavedChangesHeaderBar() Function我添加了一些代码，只有当你在屏幕上滚动至少100px时才会显示固定DIV，以便它现在没有显示在屏幕的最顶部。

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

问题是，一旦你进行了保存并且hideTaskUnSavedChangesHeaderBar()被调用，它就会隐藏固定DIV，但是一旦你再次滚动，它就会一直显示，即使没有进行任何新的更改到屏幕上的数据。

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

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

我意识到JSFiddle页面可能会有所帮助，如果没有即将发布的简单解决方案，我将努力设置一个。我暂停了，因为我的页面非常复杂，我不得不愚蠢起来让小提琴为演示工作

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

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

$(window).scroll(function() {

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

解决方案

当不再需要时，您必须取消绑定此事件处理程序。更好的方法是将它放在外面的某处，只需在函数中切换一个标志变量，这样你的滚动处理程序就会知道该做什么。

Answer 2

.hide-me { display: none !important; }

hideTaskUnSavedChangesHeaderBar方法调用addClass('hide-me')和showTaskUnSavedChangesHeaderBar调用removeClass('hide-me')

现在滚动事件不会覆盖显示到＆＃39;阻止＆＃39;。

更改窗体时显示固定DIV，并在窗体保存时隐藏它

2 个答案:

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

解决方案