个人中心
gpt4 book ai didi

javascript - div加载完成后调用js函数

转载 作者：搜寻专家 更新时间：2023-10-31 20:58:14 25 4
gpt4 key购买 nike

我有一个 div 元素，它在单击单选按钮后加载。

需要在加载后隐藏部分div。

$(function($) {
  $('.div_element').on('load', function() {
    $('.textbox').hide();
  });
});

上面的代码不起作用。我需要在 div 显示在页面上后触发一个函数。

最佳答案

下面是我将如何处理它。这是使用 vanilla JavaScript，但它可以很容易地适应使用 jQuery。

想法是使用Mutation Observers .希望对您有所帮助。

<!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>

关于javascript - div加载完成后调用js函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50960978/

25 4 0
文章推荐： php - 具有热链接保护和低内存使用率的 Laravel 下载响应
文章推荐： php - 比较php中的2个json文件
文章推荐： php - 通过 Woocommerce 中的变体 ID 获取属性 slug 值
文章推荐： php - "Server sent charset (255) unknown to the client"将 MySQL 字符集设置为 utf8 w/o/etc/my.cnf？
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com