Not sure how to use jQuery "live" from version 1.7

Viewed 170

Here a small snippet to show/hide text. The problem is that the click event doesn't fire for the "readless" class. Usually I would have use the "live" function of jQuery, but since its being deprecated in favor of "on", I wonder how should I do it?

Here's A jsfiddle: http://jsfiddle.net/SSAu2/

code:

$(document).ready(function(){

    var showHiddenText = function(e){

        e.preventDefault();

        var $this = $(this);
        $this.prev().fadeIn();
        $this.text("less").removeClass("readmore-anchor").addClass("readless-anchor");
    };

    var hideShownText = function(e){

        e.preventDefault();

        var $this = $(this);
        $this.prev().fadeOut();
        $this.text("more").removeClass("readless-anchor").addClass("readmore-anchor");
    };

    $(".readmore").after("<a href='#' class='readmore-anchor'>More</a>");
    $(".readmore-anchor").on("click", showHiddenText);
    $(".readless-anchor").on("click", hideShownText);

});​
2 Answers
Related