Q:

Is there a way to apply jQuery to dynamically created elements? (not event listeners)

I have dynamically created an element with the following class:
<span class="text">Hello</span>

and jQuery:
function changeText() {
   var oldText = $(this).text();
    $(this).text(oldText + " There");
}

$(function() {
    $(".text").each(function(){
        changeText.apply(this);
    })
})

Obviously, this is a simplified version of what is actually happening but the basics are there. Is it possible to apply this rule to dynamically created elements even though we are not using event listeners?
The problem here is that there is no specific location for these ".text" elements. The only place we know these will show up is in the body. I we use a mutationObserver on the body... wouldn't that be taxing performance?

A:

Do this instead:
function changeText() {
  var oldText = $(this).text();
  $(this).text(oldText + ' There');
}
$(function(){
$('.text').each(function(i, e){
  changeText.call(e);
});
});

