CODEWITHSUNDEEP
javascriptjquery
Udara Herath
Udara Herath

Reputation: 885

How to use jQuery in dynamically loaded elements?

I have loaded 12 <div> elements first to web page and it has a description inside a <span>. Other <div> elements load when scrolling the page. I have used following jQuery to limit description text on 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;

            }
        });
    });

This jQuery works correctly for first 12 <div> elements, but it's not working after 12 elements. How to fix this issue. Is there any possibility to do this?

Upvotes: 1

Views: 70

Answers (2)

Newinjava
Newinjava

Reputation: 960

Check this :

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 Link

Check this :- https://jsfiddle.net/o3ntvbex/3/

Note : just for demo purpose. Not optimised code.

Upvotes: 1

kennasoft
kennasoft

Reputation: 1593

Just created a quick demo to demonstrate the fact that you need to do it each time your ajax call returns with more content.

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>

Upvotes: 0

Related Questions