Call js function after div is loaded

javascript php jquery html

11,742

Solution 1

Although it may not be good solution but you can check in an interval if the div exist, if it is then you can do further:

$(() => {
  const checkDiv = setInterval(() => {
    if($('.div_element').length > 0) {    // it's better to use id instead of the class as selector
      clearInterval(checkDiv);
      // more action here
    } 
  }, 100); // check after 100ms every time
});

Solution 2

Here is how I would go about it. This is using vanilla JavaScript but it can easily be adapted to use jQuery.

The idea is to use Mutation Observers. I hope it helps.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>DOM MUTATION OBSERVERS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <form name="radios">
        <input type="radio" name="gender" value="male" id="maleRadio" checked> Male
        <br>
        <input type="radio" name="gender" value="female" id="femaleRadio"> Female
        <br>
        <input type="radio" name="gender" value="other" id="otherRadio"> Other
    </form>

    <!-- This div will be displayed when the radio button whose value is female is clicked. -->
    <div id="femaleDiv" style="display: none">
        <p>The textbox should be below...</p>
        <input type="text" id="textToHide">
    </div>

    <script>
        // After the document loads...
        document.onload = function () {
            // Attach an onclick listener to the radio buttons.
            var radios = document.forms["radios"].elements["gender"];
            for (var i = 0, max = radios.length; i < max; i++) {
                radios[i].onclick = function (event) {
                    var radio = event.target || event.srcElement;
                    console.log(radio.name);
                    if (radio.value === "female") {
                        document.getElementById("female").style.display = "block"
                    }
                }
            }

            // Get the div whose change in attributes we are interested in.
            var targetNode = document.getElementById("femaleDiv");

            // Set the mutation observer to only listen to attribute mutations
            var config = { attributes: true };

            // This will be called when a mutation has been observed
            var callback = function(mutationsList) {
                for (var mutation of mutationsList) {
                    if (mutation.type == "attributes") {
                        console.log(mutation);
                        console.log('The ' + mutation.attributeName + ' attribute was modified.');
                        if (targetNode.style.display == "block") {
                            document.getElementById("textToHide").style.display = "none";
                        }
                    }
                }
            };

            // Create the observer
            var observer = new MutationObserver(callback);

            // Start observing
            observer.observe(targetNode, config);

            // Uncomment this to stop observing at at the right place.
            // observer.disconnect();
        } ();
    </script>
</body>

</html>

11,742

phpblogger

Updated on September 15, 2022

Comments

phpblogger over 1 year
I have a div element which is loaded after a click on a radio button.

Need to hide a part of the div after it is loaded.
```
$(function($) {
  $('.div_element').on('load', function() {
    $('.textbox').hide();
  });
});
```
The above code doesn't work. I need to trigger a function after the div is shown on the page.
- Sebastian Simon almost 6 years
  
  A <div> doesn’t “load”. Do you want to call a function as soon as the <div> is in the DOM? Search for Mutation Observers. If the <div> isn’t in the DOM, then you can’t bind an event listener to it.
phpblogger almost 6 years

Already tried this - it doesn't work after the div is loaded. Just checks on page load if the div is present on not.
phpblogger almost 6 years

This works. Thanks. but as expected takes more time to load the main div :-(. Sad that there is no onload event for the element which can just act based on the visibility of the div