Question

我有这个脚本运行以在滚动时将我的菜单栏修复到浏览器。这里没有什么需要改变（按照它应该的方式工作）。但是，你可能需要它......

var div = $('#wizMenuWrap');
var editor = $('#main_wrapper');
var start = $(div).offset().top;

$(function fixedPackage(){   
    $.event.add(window, "scroll", function() {
        var p = $(window).scrollTop();
        $(div).css('position',((p)>start) ? 'fixed' : 'static');
        $(div).css('top',((p)>start) ? '0px' : '');

        //Adds TOP margin to #main_wrapper (required)
        $(editor).css('position',((p)>start) ? 'relative' : 'static');
        $(editor).css('top',((p)>start) ? '88px' : '');
    }); 
});

现在问题就在眼前。我有另一个脚本函数调用模式弹出窗口（它再次起作用）。但是，当我打开模态时滚动页面时，从UI角度来看，它并不光滑。所以我想在调用下面的模态脚本时禁用上面的脚本。换句话说，当我点击打开模态弹出窗口时，上面的脚本不起作用。

$(function () {

var setUp = $('.setupButton');

// SHOWS SPECIFIED VIEW

$(setUp).click(function () {        
    $('#setupPanel').modal('show');
    //PREVENTS PACKAGE SELECT FIXED POSITION ON SCROLL
    $(setUp).unbind('click',fixedPackage);
});

})

正如您在上面所看到的，我尝试取消绑定滚动功能（第一个代码段），但这不正确。

这两个脚本位于两个独立的js库中。

Answer 1

我强烈反对你应该约束并解除事件的束缚。没有必要！滚动事件中的一个小逻辑来检查模态是否打开应该解决问题：

$(function fixedPackage(){   
    $(window).bind("scroll", function() {

        // if the modal is displayed, do nothing
        if ($('#setupPanel').is(':visible'))
            return;

        // -- existing code here --
    }); 
});

这样，如果模态元素可见，代码就会停在原处。隐藏元素后，代码将继续像以前一样工作，而无需在其他脚本中管理事件状态......令人困惑！

此外，正如其他一些评论所述，请勿使用$.event.add，请使用公开API方法bind

<强>文档

jQuery is - http://api.jquery.com/is/
jQuery visible选择器 - http://api.jquery.com/visible-selector/
jQuery bind - http://api.jquery.com/bind/

Answer 2

将jquery对象存储到var中时，可以直接调用函数：

var setUp = $('.setupButton');
var div = $('#wizMenuWrap');
var editor = $('#main_wrapper');

setUp.click(...);
seTup.unbind(...);

editor.css(...);

div.css(...);

Answer 3

试

  $(setUp).unbind('click').die('click')

Answer 4

您需要做的就是将脚本更改为：

$(function () {

var setUp = $('.setupButton');

// SHOWS SPECIFIED VIEW

$(setUp).bind('click',function () {        
    $('#setupPanel').modal('show');
    //PREVENTS PACKAGE SELECT FIXED POSITION ON SCROLL
    $(setUp).unbind('click');
});

})

正如jQuery文档中所述，Event handlers attached with .bind() can be removed with .unbind()。有关bind和unbind的更多信息：

.bind()

.unbind()

如何取消绑定.click（）上的另一个jQuery函数？

4 个答案: