Как использовать jQuery в динамически загружаемых элементах?

Question

Я загрузил 12 <div> элементов с первой на веб-страницу и имеет описание внутри <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; 
     } 
} 

Demo Ссылка

Проверьте это: - 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>