<http://jsfiddle.net/fe3hnh4x/>

```
<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?