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

Question

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?

The best way is to alter the function responsible for the creation of those dynamic elements. — ibrahim mahrir, Dec 15 '17 at 00:46
Can you change the code responsible for the creation of the dynamic elements? — ibrahim mahrir, Dec 15 '17 at 00:52
Unfortunately no, this is using an antiquated framework to do this. — Philll_t, Dec 15 '17 at 00:53
Are the dynamic elements only appended to one parent elements? Or there is more of those parent elements? — ibrahim mahrir, Dec 15 '17 at 00:53
I figured if it was possible to persist event binding to dynamically created elements, then it _should_ be possible to apply jQuery to these as well. — Philll_t, Dec 15 '17 at 00:54
It varies, the only for sure thing is that it will have the class. — Philll_t, Dec 15 '17 at 00:54
Possible duplicate of [Mutation Observer for creating new elements](https://stackoverflow.com/questions/13277212/mutation-observer-for-creating-new-elements) — ibrahim mahrir, Dec 15 '17 at 00:55
well if that's the only way to do it... then I suppose its what I will have to use. — Philll_t, Dec 15 '17 at 00:59
If you need to support IE, MutationObsever is a non-starter. You could probably hack something with `window.setInterval` and `document.querySelectorAll('.text')` as an alternative. — vzwick, Dec 15 '17 at 01:33

score 0 · Answer 1 · answered Dec 15 '17 at 00:46

0

Like this

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

answered Dec 15 '17 at 00:46

JoshKisb

742
7
9

I don't think that's what OP needs. – ibrahim mahrir Dec 15 '17 at 00:46
the `find` method keeps looking for those elements even after the page is loaded? – Philll_t Dec 15 '17 at 00:47
Looks like, no. Sorry this isn't what I'm looking for. Any tips to make my question more clear? – Philll_t Dec 15 '17 at 00:50
no the find method looks on the dynamic element. for example if you create a div after page load the div would be the dynamic element and find searches the div only – JoshKisb Dec 15 '17 at 01:18

StackSlave · Accepted Answer · 2017-12-15T02:08:39.673

0

Do this instead:

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

edited Dec 15 '17 at 02:08

answered Dec 15 '17 at 02:02

StackSlave

10,613
2
18
35

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

2 Answers2