Using on() to delegate event when function stored in variable
I have a working function:
var bindReadMore = function(){
$('.read-more').on('click', function(e) {
e.preventDefault();
var parent = $(this).parent();
parent.trigger("destroy");
parent.removeClass('truncable-txt--is-truncated');
parent.addClass('truncable-txt--is-not-truncated');
bindReadLess(); // bind click on "less"
});
};
but because data will be added to the page at a later time, I know that the function needs to be "delegated" to an element definitely existing in the DOM. Ordinarily I would change the second line to:
$("body").on("click",".read-more", function(e) {
but this does not work. I think it has to do with the fact that the function is assigned to a variable but am not sure. How can I rewrite this so that the function is attached to the body and elements added to the page later are handled appropriately?
Thanks for any help.