Question

Ok, I’m having a weird problem:

I have a button that is inserting divs into the DOM. When the button is clicked, the first time, the div always appears immediately on the page. However, subsequent button clicks do not insert any more divs.

Now here’s the strange thing, after I insert additional divs, and they don’t show up, I select inspect element with the chrome developer tools, and the div instantly appears after invoking the developer tools. I can see the

$('#list').before('<div class="mybox">some text</div>');

It basically doesn’t seem like chrome is refreshing, even though the new elements are being input into the DOM, the browser window doesn’t reflect the changes until I go into the developer tools. But I can’t figure out why?

Answer 1

You’re right. It is a weird problem. And it happened to me too.

In my case, I was relying on an external library to create an element for me at startup. I’m still not sure what the root cause is, but I solved it by calling setTimeout(myFunctionThatSetsUpTheElement, 1).

Hope this helps.