動的に読み込まれる要素でjQueryを使用するには？

Question

私は最初に12 <div>の要素をWebページに読み込んでおり、その中には<span>の説明があります。ページをスクロールするときに他の<div>要素が読み込まれます。私は次のjQueryを使ってdivの説明テキストを制限しています。

$(document).ready(function() { 
     $("span.fine-print").html(function(index, currentHTML) { 
      if (currentHTML.length > 200) { 
       var str= currentHTML.substr(0, 200)+ '...<p style="color:blue;display:inline">Read more</p>'; 
       return str; 

      } 
     }); 
    }); 

このjQueryのは、最初の12個の<div>要素に対して正しく動作しますが、それは12個の要素の後に働いていません。この問題を解決する方法。これを行う可能性はありますか？

Answer 1

この

チェック：

Htmlの

<div id="wrapper"> 
<div> 
    <span class="sp">hello hello hello hello hello hello hello hello hello</span> 
</div> 
<div> 
    <span class="sp">hello hello hello hello hello hello hello hello hello</span> 
</div> 
<div> 
    <span class="sp">hello hello hello hello hello hello hello hello hello</span> 
</div> 
<div> 
    <span class="sp">hello hello hello hello hello hello hello hello hello</span> 
</div> 
<div> 
    <span class="sp">hello hello hello hello hello hello hello hello hello</span> 
</div> 
</div> 

のjQuery

$(document).ready(function() { 
     $(".sp").html(function(index, currentHTML) { 
     return changeContent(currentHTML); 
    }); 
}); 

$(document).scroll(function() { 
    var htmlStrng = "<div><span class='sp'>hello hello hello hello hello hello hello hello hello</span></div>"; 
    var $contentStr = $(htmlStrng); 
    var contentString = $contentStr.find('span').text(); 
    contentString = changeContent(contentString); 
    $contentStr.find('span').html(contentString); 
    $("#wrapper").append($contentStr); 
    }); 

function changeContent(htmlStr){ 
    if (htmlStr.length > 20) { 
      var str= htmlStr.substr(0, 20)+ '...<p style="color:blue;display:inline">Read more</p>'; 
      return str; 
     } 
} 

デモリンク

チェックこの： - https://jsfiddle.net/o3ntvbex/3/

注：デモ目的のためだけに。最適化されていないコード。

Answer 2

ajax呼び出しがより多くのコンテンツを返すたびに、それを行う必要があるという事実を実証するためのデモを作成しました。

function abridgeFinePrint(){ 
 
    $("span.fine-print").html(function(index, currentHTML) { 
 
      if (currentHTML.length > 200) { 
 
       var str= currentHTML.substr(0, 200)+ '...<p style="color:blue;display:inline">Read more</p>'; 
 
       return str; 
 

 
      } 
 
     }); 
 
} 
 

 
$(document).ready(function() { 
 
    abridgeFinePrint(); 
 
    $('button').on('click', function(){ 
 
     $('#loading-indicator').show(); 
 
     //simulate ajax latency 
 
     setTimeout(function(){ 
 
     $('#loading-indicator').hide(); 
 
     $('#template').clone().css({display: "block"}).appendTo('section'); 
 
     $('section div:last span').addClass('fine-print'); 
 
     abridgeFinePrint() 
 
     }, 800); 
 
     }); 
 
});

div { 
 
    border: 1px solid #555; 
 
    border-radius: 5px; 
 
    padding: 15px; 
 
    margin: 3px; 
 
} 
 

 
div:hover { 
 
    background: #ddd; 
 
} 
 

 
#template, 
 
#loading-indicator { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section> 
 
<div><span class="fine-print">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span> 
 
    </div> 
 
</section> 
 
<div id="loading-indicator">Loading...</div> 
 

 
<button>Load more divs</button> 
 

 
<div id="template"><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span> 
 
    </div>