CODEWITHSUNDEEP
javascriptjqueryhtml
Tinmar
Tinmar

Reputation: 370

JQuery do something after DOM element is created - DOMNodeInserted not working

Ok, I have one empty div, which is dynamically filled with some content later:

<div class="row no-margin">
    <div id="sensorInfoContent">
    </div>
</div>

Later it is filled with some other divs and content. I need to select this child div:

<div class="circDash" id="batPerc" accesskey="30" style="height:100px; background-color:#000000;">

And call this function on it:

$(*DIV*).circleProgress({
            value: 0.75,
            size: 80,
            fill: {
                gradient: ["red", "orange"]
           }
        });

I tried to do that on click, and it's working. Like this:

$('#sensorInfoContent').on("click", ".circDash", function() {

    $(this).circleProgress({
        value: 0.75,
        size: 80,
        fill: {
            gradient: ["red", "orange"]
       }
    });
});

But I need it to be done after element is dynamically added, not on click. Tried DOMNodeInserted, it's not working:

    $('#sensorInfoContent').on("DOMNodeInserted", ".circDash", function() {

        $(this).circleProgress({
            value:

 0.75,
        size: 80,
        fill: {
            gradient: ["red", "orange"]
       }
    });
});

Any ideas, alternatives or work-arounds?

Upvotes: 3

Views: 458

Answers (2)

Tinmar
Tinmar

Reputation: 370

Ok, I solved it on my own, by blind guessing.

Script code was initially written on the top of the page, now I put the script below this .circDash div and it's working! :D

It was just about script positioning, I guess now script is running after div is created.

I am new in JQuery/JS so... This might be a rookie mistake. :D Cheers!

EDIT: If someone wants and knows to answer on why function on.("click",... worked and function on.("DOMNodeInserted",... didn't, that would be the best answer on this all, regardless of my solved solution.

Upvotes: 0

Sudharsan S
Sudharsan S

Reputation: 15393

Just trigger the click manually

$('#sensorInfoContent').on("click", ".circDash", function() {

    $(this).circleProgress({
        value: 0.75,
        size: 80,
        fill: {
            gradient: ["red", "orange"]
       }
    });
});

Like this

$('.circDash').trigger('click');

Upvotes: 1

Related Questions