Question

我有这段代码：

$(document).ready(function() {
function resizeMe(resizingFunction) {
    var resizeId;
    resizingFunction();
    $(window).resize(function() {
      clearTimeout(resizeId);
      resizeId = setTimeout(resizingFunction, 500);
    });
}

function scrollToText() {
    var scrollHandler = function() {
        console.log('handler')
        $('html,body').animate({
            scrollTop: $("#scrollHere").offset().top-80
        }, 500);
    }

    if ($(window).width() <= 768) {
        $('.jquery').bind('click', scrollHandler);
    } else {
        console.log('above 768');
        $('.jquery').each(function() {
            $(this).unbind('click', scrollHandler);
        });
        $('.jquery').unbind('click', scrollHandler);
    }
}
resizeMe(scrollToText);
});

因此，它应该在每次窗口浏览器更改其尺寸时运行。

当页面刚刚加载并且其宽度为> 768 scrollHandler没有绑定，这是可取的。当我将窗口的大小更改为＆lt; = 768的宽度时，处理程序绑定到单击事件，它工作正常。但是，当我再次调整大小并且宽度为> 768然后处理程序仍然可用（它不应该是）。我试图将条件块中的代码更改为$（＆＃39; .ququery＆＃39;）。unbind（）;所以它删除绑定到选择器的每个事件然后它工作正常。问题是我有一些其他点击事件绑定到此元素，所以我只想删除这个特定的。有线索吗？

Answer 1

每当您致电scrollToText时，您正在创建一个新的scrollHandler函数（对象） - 所以当您稍后在同一个新创建<的调用中调用unbind('click',scrollHandler)时/ em> scrollHandler，尚未绑定，因此无法解除绑定（并且您已丢失对旧处理程序的引用）。

在scrollHandler定义之外定义scrollToText - 您只需要定义一次 - 其余代码应该有效。

另外请注意，您提到了一些事件处理程序。请考虑使用事件命名空间，例如bind('click.myScrollHandler',function(){...})和更晚unbind('click.myScrollHandler')。

function scrollHandler() { console.log('handler') $('html,body').animate({ scrollTop: $("#scrollHere").offset().top-80 }, 500); } function scrollToText() { if ($(window).width() <= 768) { $('.jquery').bind('click.scrollHandler', scrollHandler); } else { console.log('above 768'); //$('.jquery').each(function() { // $(this).unbind('click', scrollHandler); //}); $('.jquery').unbind('click.scrollHandler', scrollHandler); } }

Answer 2

在窗口调整大小事件中触发resizeMe：

//resizeMe(scrollToText);//This will be replaced by the following code
$(window).on('resize',function(){
  resizeMe(scrollToText);
}).resize();//trigger resize on load

Answer 3

尝试以下代码..

$(window).resize(function() {

resizeMe(scrollToText);

});

    function resizeMe(resizingFunction) {
        var resizeId;
        resizingFunction();
        $(window).resize(function() {
          clearTimeout(resizeId);
          resizeId = setTimeout(resizingFunction, 500);
        });
    }

    function scrollToText() {
        var scrollHandler = function() {
            console.log('handler')
            $('html,body').animate({
                scrollTop: $("#scrollHere").offset().top-80
            }, 500);
        }

        if ($(window).width() <= 768) {
            $('.jquery').bind('click', scrollHandler);
        } else {
            console.log('above 768');
            $('.jquery').each(function() {
                $(this).unbind('click', scrollHandler);
            });
            $('.jquery').unbind('click', scrollHandler);
        }
    }

Answer 4

为什么使用jquery？媒体查询可以非常轻松地处理这些事情。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_marginBottom="2dp"
    android:layout_height="wrap_content">

    <TextView
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content" />

    <TextView
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="match_parent" />

</LinearLayout>

试试这个。对不起我的英文：/

jQuery - unbind函数不起作用

4 个答案: