Q:

jquery click disable the function

$('document').ready(function(){
    //textoverflow($('.content'),100);

    $('span').click(function(){
        //disable textoverflow function & output full text
    });
});

function textoverflow(ele, num){
    ele.each(function() {
        $(this).text(
            $(this).text().slice(0,num) + '...'
        ).append('<span>More</span>');
    });
}

I have a text use a function slice the content.
There is a button when user click, i want to disable function only for $this .content & output all text without slice.
How to disable function?

A:

Make a copy of the orginal and store it in a data attribute. Loop through and put the text back.
function textoverflow(ele, num){
    ele.each(function() {
        var item = $(this);
        var orgText = item.text();
        if (orgText.length>num) {
            item.data("orgtext", orgText);
            item.text( item.text().slice(0,num) + '...');
            item.append('<span>More</span>');
        }
    });
}

function undoTextoverflow(ele){
    ele.each(function() {
        var item = $(this);
        var orgText = item.data("orgtext");
        if (orgText) {
            item.text(orgText);
        }
    });
}

$(function(){
    textoverflow($('.content'),100);

    $('.content').on("click", "span", function(){
        var parentElem = $(this).closest(".content");
        undoTextoverflow(parentElem);
    });
});

