Attach js function to creation of element

Question

I have a php template. lets call it buildElement.php. This element is called many times in many places in my application.

What I need to do is attach js function to the creation of the element.

Lets say that buildElement.php creates some nested div's and one of them has the class name veryImportantClass

I also have a js file which is imported in the project (script src...you know it) and in this file I am trying to resize the font of the veryImportantClass in function called autoResizeText

My problem is that this function autoResizeText wont execute on creation of a new element.

I am not sure on what pages use that veryImportantClass but when its loaded I wanna know and I wanna attach my js function to it.

So far I have $(document).ready() which executes the js when the page loads but if something is created dynamically without refresh I wont catch it.

Is there jQuery event I could use?

[EDIT] I cant post the whole php template as it has custom classes and variables which I cant begin to explain from where they come but here is an example of the final result in the browser with no variables

<div class='container>
  <a href="{somewhere}"> 
    <span class="veryImportantClass>Some text</span>
  </a>
</div>

Here is what my js function tries to do

function resizeElement (element) {
    let elementText = $(element).text();
    elementText = elementText.trim();
    if (elementText.length > 13) {
        element = $(element).css('font-size', '10px');
    }
    return element;
}

It checks how many symbols are in the text and if there are too many it lowers the font-size.

I have also created another function that checks every current span and calls this one

function autoResizeText() {
    console.log('I am resizing the text');
    let elements = $('.veryImportantClass');
    let result = [];
    for (let i = 0; i < elements.length; i++) {
        let element = elements[i];
        element = resizeElement(element);
        result.push(element);
    }
    return result;
}

So far this is how I make them work

$(document).ready(autoResizeText());

What I want is either to be capable to attach resizeElement to every span with class veryImportantClass or when a span with this element is created I want to call autoResizeText() which will take all current spans with that class and do the work.

I edited the post. Now you can see example of the html created and the js functions I want to invoke. — Pavlin Petkov, Oct 25 '17 at 08:00
You have to use jQuery.on() dynamically created elements: https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — jannej, Oct 25 '17 at 08:07
I would like to know how your php code adds the divs. Is it done via an ajax request? You'd have to trigger the piece of jQuery when adding the element but you have not provided the corresponding code. — Wouter Bouwman, Oct 25 '17 at 08:10
In some places the template is called via "include()' or "importView()" function of a class or in other cases where its dynamical its by ajax call to these other views which call this template. The template itself uses some classes to get the data it needs but overall it just says "echo
" and so on. — Pavlin Petkov, Oct 25 '17 at 08:12

Arjun Kariyadan · Accepted Answer · 2017-10-25T09:21:41.103

1

Try this:

$(document).on('DOMSubtreeModified', function(e) {
    $(".veryImportantClass:not(.handled)").each(function() {
        $(this).addClass("handled");
        autoResizeText(this);
    });
});

DOMSubtreeModified fire when element insert on the document. .veryImportantClass:not(.handled) select all element which is not passed to autoResizeText function by using the class .handled.

edited Oct 25 '17 at 09:21

answered Oct 25 '17 at 09:02

Arjun Kariyadan

454
2
11

score 0 · Answer 2 · answered Oct 25 '17 at 07:55

0

You can set an interval to execute the function every second. But it is not recommended at all. setInterval(function(){ //functionGoesHere }, 1000); https://www.w3schools.com/jsref/met_win_setinterval.asp
Or you can call the function after each ajax call of element creation
Or you can simply, add the new font size in the css file if the font size change is global on all pages

answered Oct 25 '17 at 07:55

Mario Rawady

858
7
17

First option is a really bad idea. About the attachment to all ajax - the project is big and there are lots of stuff doing the job which means I cant be really sure that I have all the ajax calls covered. It will also create large dependency. As for the changing of size - This element can have a small number of text or large number of text and if its small I want to leave it be, but if its big I want to lower it. – Pavlin Petkov Oct 25 '17 at 08:00

Attach js function to creation of element

2 Answers2