jqueryを使用してアンバインドした後にウィンドウをスクロールできない

Question

window.scrollイベントを使用して、スクロールのbuttomに達したときにdivにコンテンツをロードしています。

$(window).scroll(function() { 
    if($(window).scrollTop() + $(window).height() > $(document).height() - 100) { 
     $(window).unbind('scroll'); 
     loadMoreCommentsOnArticle(); 
    } 
}); 

    function loadMoreCommentsOnArticle(){ 
       $(window).bind('scroll'); 
       var dynamicData = fetchData(); 
       $('#parentElement').append(dynamicData); 
} 

スクロールは一度最初にバインドした後に結合しません。たぶん$（window）.unbind（ 'scroll'）で。しかし、私は$（window）.bind（ 'scroll'）を使ってもう一度スクロールをバインドしようとしています。それは動作していません。

$（ウィンドウ）.unbind（ 'スクロール'）を使用しない場合。スクロールイベントは、すぐには何度も発砲しています。

私はあなたが実行するための機能を提供していないloadMoreCommentsOnArticle()であなたが再結合し、スクロールイベントので、問題があるロリー

var $window = $(window); 
function windowScroll() { 
    if ($window.scrollTop() + $window.height() > $(document).height() - 100) { 
    window.off('scroll'); 
    loadMoreCommentsOnArticle(); 
    } 
} 
$window.scroll(windowScroll); 

Answer 1

に従って、この方法を使用しています。スクロール・ロジックを独自の関数に抽出してバインディング/リビルドを容易にすることで、この問題を解決できます。

また、bind()とunbind()は非推奨です。代わりにon()とoff()を使用してください。

var $window = $(window); 
 

 
function windowScroll() { 
 
    if ($window.scrollTop() + $window.height() > $(document).height() - 100) { 
 
    $window.off('scroll'); 
 
    loadMoreCommentsOnArticle(); 
 
    } 
 
} 
 

 
$window.scroll(windowScroll); 
 

 
function loadMoreCommentsOnArticle() { 
 
    $window.on('scroll', windowScroll); 
 
    $('#parentElement').append(fetchData()); 
 
} 
 

 
function fetchData() { 
 
    console.log('loading data...') 
 
    return '<div>More data...</div>'; 
 
}

#parentElement div { 
 
    height: 3000px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="parentElement"> 
 
    <div>Some data...</div> 
 
</div>