<div class="text">(some text...)</div>
var text = $(".text").text();
var excerpt = '';
if(text.length > 100) {
console.log(text.length);
excerpt = text.substr(0, 100);
$(".text").html(excerpt + "<div class='readMore'><a href='#'>Read More</a</div>");
}
$(".readMore").on('click', function() {
$(".text").html(text + "<div class='showLess'><a href='#'>Show Less</a></div>");
});
$(".showLess").on('click', function() {
$(".text").html(excerpt + "<div class='readMore'><a href='#'>Read More</a></div>");
});
I am trying to make an excerpt of text using javascript. When the "Read More" is clicked, and whole text and the "Show Less" is displayed. And when the "Show Less" is clicked, the excerpt and "Read More" shows again. The "Show Less" does not trigger any event, but the "Read More" seems to work. Why?
Try this:
$(document).on('click', ".showLess", function () {
$(".text").html(excerpt + "<div class='readMore'><a href='#'>Read More</a></div>");
});
Demo: http://jsfiddle.net/fe3hnh4x/1/
And here is the explanation: Event binding on dynamically created elements?
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments