jQuery INVIEWが別の関数で追加されたクラスで動作しない

Question

この最初のコードでは、LIKEをクリックすると、アクティブセクションにクラス.lovedが追加されます。.section .active。 （.activeクラスは、フルページプラグインによって可視セクションに自動的に追加されます）。

ここでは、INVIEWプラグインが機能しないことがわかります。この第二の機能で

$('#fullpage').fullpage({}); 
 

 
$(document).on("click", ".like", function() { 
 
    $('.section.active').addClass("loved") 
 
}) 
 

 
$('.loved').on('inview', function(event, isInView) { 
 
    if (isInView) { 
 
    console.log("IN VIEW") 
 
    } else { 
 
    console.log("GONE") 
 
    } 
 
});

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 10vw; 
 
    line-height: 1.2em; 
 
} 
 

 
.section { 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    background: grey; 
 
    color: #141414; 
 
} 
 

 
.like { 
 
    color: red; 
 
    position: fixed; 
 
    cursor: pointer; 
 
    top: .3em; 
 
    right: .3em 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.min.js"></script> 
 
<script src="https://rawgit.com/protonet/jquery.inview/master/jquery.inview.min.js"></script> 
 
<div id="fullpage"> 
 
    <div class="section">One</div> 
 
    <div class="section">Two</div> 
 
    <div class="section">Three</div> 
 
    <div class="section">Four</div> 
 
</div> 
 
<div class=like>LIKE</div>

Iセクションにクラス.lovedを追加した場合、その後INVIEWがスムーズに動作します。
アイデア？

$('#fullpage').fullpage({}); 
 

 
$('.loved').on('inview', function(event, isInView) { 
 
    if (isInView) { 
 
    console.log("IN VIEW") 
 
    } else { 
 
    console.log("GONE") 
 
    } 
 
});

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 10vw; 
 
    line-height: 1.2em; 
 
} 
 

 
.section { 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    background: grey; 
 
    color: #141414; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.min.js"></script> 
 
<script src="https://rawgit.com/protonet/jquery.inview/master/jquery.inview.min.js"></script> 
 
<div id="fullpage"> 
 
    <div class="section loved">One</div> 
 
    <div class="section">Two</div> 
 
    <div class="section">Three</div> 
 
    <div class="section">Four</div> 
 
</div>

Answer 1

あなたの問題は、この行にありますので、あなたがドキュメントにイベントを委任する必要があり、「将来的には」クラスを追加最初のスニペットで

$('.loved').on('inview', function(event, isInView) { 

：

$(document).on('inview', '.loved', function(event, isInView) { 

また、スニペットを作成する場合、n

https://raw.githubusercontent.com/.... 

：

https://rawgit.com/.... 

スニペット：あなたから変換する必要がありlibにgithubのを使用するためのEED

$('#fullpage').fullpage({}); 
 

 
$(document).on("click", ".like", function() { 
 
    $('.section.active').addClass("loved") 
 
}) 
 

 
$(document).on('inview', '.loved', function(event, isInView) { 
 
    if (isInView) { 
 
     console.log("IN VIEW") 
 
    } else { 
 
     console.log("GONE") 
 
    } 
 
});

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 10vw; 
 
    line-height: 1.2em; 
 
} 
 

 
.section { 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    background: grey; 
 
    color: #141414; 
 
} 
 

 
.like { 
 
    color: red; 
 
    position: fixed; 
 
    cursor: pointer; 
 
    top: .3em; 
 
    right: .3em 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.min.js"></script> 
 
<script src="https://rawgit.com/protonet/jquery.inview/master/jquery.inview.min.js"></script> 
 

 

 
<div id="fullpage"> 
 
    <div class="section">One</div> 
 
    <div class="section">Two</div> 
 
    <div class="section">Three</div> 
 
    <div class="section">Four</div> 
 
</div> 
 
<div class=like>LIKE</div>