显示从数据库加载的文本的更多按钮

Question

我想为任何超过100个字符的文本添加显示更多/更少按钮。我使用（这是在 index.php ）：

    $(document).ready(function() {

        var content  = $('.textcontent').html();
        var lessContent = content.substr(0, 100);

        if (content.length > 100) {
            $('.textcontent').html(lessContent).append("<a href='#' class ='showMore'>...</a>")
        }   else{
            $('.textcontent').html(content);
        }

        $('body').on('click', '.showMore', function(event){
            event.preventDefault();
            $(this).parent('.textcontent').html(content).append("<a href='#' class='showLess'>...</a>")
        });

        $('body').on('click', '.showLess', function(event){
            event.preventDefault();
            $(this).parent('.textcontent').html(lessContent).append("<a href='#' class='showMore'>...</a>")
        });
    });

所以它适用于像（在 index.php 中）的普通元素：

<div class = 'textcontent'>blablabla</div>。

但对于使用ajax从数据库加载的元素，它不起作用。 （v这也在 index.php 中）

        if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("pul").innerHTML = this.responseText;

        }
    };
    xmlhttp.open("GET","home.php",true);
    xmlhttp.send();

现在 home.php

echo "<div class ='textcontent'>$content</div>"

有人知道为什么吗？请帮我。非常感谢。